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