为什么我不能引用外部文件(绘图服务器)中定义的SVG线性渐变？

Question

请看看这支笔:

http://codepen.io/troywarr/pen/VYmbaa

我在这里做的是:

• 定义SVG符号(<symbol>)
• 定义SVG线性渐变(<linearGradient>)
• 使用该<use>元素来引用我创建的SVG符号
• 在CSS中,定义两个类:
  • external,它引用在定义的线性梯度这个外部.svg文件(右键点击和查看源)
  • internal,它引用了本地HTML中定义的线性渐变(我相信,它实际上与外部文件中的相同)

因为我已将internal类应用于<svg>HTML示例底部的元素,所以应用渐变,呈现蓝色渐变复选标记.这就是我所追求的.

但是,如果您在HTML示例中切换internal类external,则不再显示复选标记:

http://codepen.io/troywarr/pen/vEymKX

当我观看Chrome Inspector的"网络"标签时,我看不到浏览器尝试加载SVG文件.我的语法有问题,还是其他的东西在这里？

根据我发现的一些参考资料,至少看起来我正在做这件事:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• /sf/answers/498269971/

但是,到目前为止我没有尝试过任何东西,这使我能够引用外部.svg文件中定义的线性渐变.

谢谢你的帮助!

Answer 1

经过更多研究,看起来这是一个浏览器支持问题.看到:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

可悲的是,在发布我的问题之前我曾经遇到过这个问题,并且认为在5-1/2年内,浏览器支持肯定会赶上 - 但事实并非如此.

截至2015年,显然Firefox和Opera是唯一两款以任何实质性方式支持此功能的浏览器.

回到绘图板...