之前寫了使用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’]