tips - 解決 base 標籤造成 SVG 效果失效

Bob-Chen發表於2016-07-26

之前寫了使用SVG實現一個騷氣的圓環: 一個比想象中更騷氣的圓-svg實現。後來上線過程中發現漸變的效果出不來,原來是html base標籤和內聯SVG同時使用引起的一個坑,略偏,記錄一下。

base標籤

base 標籤為頁面上的所有連結規定預設地址或預設目標。通常情況下,瀏覽器會從當前文件的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用base標籤可以改變這一點。瀏覽器隨後將不再使用當前文件的 URL,而使用指定的基本 URL 來解析所有的相對 URL。

一個經常用到的場景是:頁面在一個域名下,靜態資源放CDN上,和本地開發的時候用一樣的目錄結構,頁面用相對路徑來引用靜態資源,然後上線的時候使用base標籤指定CDN域名。

解決問題

base標籤看起來是那麼的美好,簡單粗暴,但是html裡面內嵌了SVG之後,漸變圓環的效果就出不來了,納尼?!

問題就出在stroke="url(#fill-img)"這一句上,因為指定了base標籤,這裡會被指定為stroke="url(base指定的URL#fill-img)"所以就找不到這個資源了。

解決方案是使用當前頁面的全路徑,記得所有的引數都要帶上。比如改成:url(my.site.com/this_page_n…)

受這個影響的屬性有:['clip-path', 'color-profile', 'src', 'cursor', 'fill', 'filter', 'marker', 'marker-start', 'marker-mid', 'marker-end', 'mask', 'stroke’]

參考

www.w3school.com.cn/html5/html5…

github.com/angular/ang…

stackoverflow.com/questions/1…

相關文章