tips - 解决 base 标签造成 SVG 效果失效

之前写了使用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…