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

Posted on 2016-07-26 in SVG by yucongchen

之前写了使用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(http://my.site.com/this_page_name.html?x=y#fill-img)

受这个影响的属性有:['clip-path', 'color-profile', 'src', 'cursor', 'fill', 'filter', 'marker', 'marker-start', 'marker-mid', 'marker-end', 'mask', 'stroke’]

参考

http://www.w3school.com.cn/html5/html5_base.asp

https://github.com/angular/angular.js/issues/8934

http://stackoverflow.com/questions/18259032/using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke

SVG