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(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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

jQuery.html()方法ie下不能设置html代码的问题

jQuery一般来说还是很好用的,但有时候它也会有些问题的,比如jQuery的html()方法设置html代码,在一种情况下,ie6、ie7、ie8 下是不能...

38011
来自专栏从零开始学自动化测试

appium+python自动化42-微信公众号webview操作

上一篇已经解决切换到微信公众号的webview上了,但是定位webview上元素的时候一直提示找不到,打印page_source也找不到页面上的元素,这个问题困...

1771
来自专栏lonelydawn的前端猿区

打造炫酷的通知插件EasyToaster

引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

3699
来自专栏魏艾斯博客www.vpsss.net

宝塔面板安装后需要改掉默认端口和登陆账号

7102
来自专栏极客慕白的成长之路

前端知识点总结 : Vue

作用:将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图。

541
来自专栏快乐八哥

Windows8异步编程的注意事项

Windows8项目中涉及到下载数据和上传数据。针对小的数据使用的是WinJS.xhr(),而针对大的文件,不方便使用post方式直接上传的文件都使用Backg...

17910
来自专栏Puppeteer学习

一步一步学习Vue(十一)

1662
来自专栏Youngxj

EMLOG自适应emMsg提示信息

2128
来自专栏林德熙的博客

C# 从零开始写 SharpDx 应用 控制台创建 Sharpdx 窗口 下载创建窗口

本文告诉大家如何在控制台使用 SharpDx 创建窗口,这是一个底层的博客,我会用很多博客告诉大家如何从控制台创建一个高性能渲染程序

1242
来自专栏枕边书

JavaScript Alert 函数执行顺序问题

问题 ---- 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求...

3084

扫码关注云+社区

领取腾讯云代金券