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

Question

请看一下这支笔:

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

我在这里做的是:

定义SVG符号的

(<symbol>)

定义SVG线性渐变(<linearGradient>)

使用<use>元素引用我创建的SVG符号

CSS中的

，定义了两个类:

external，它引用this external .svg file(右键单击并查看源代码)

中定义的线性渐变

internal，它引用了本地HTML中定义的线性渐变(我相信它实际上与外部文件中的线性渐变相同)

因为我已经将 internal类应用于HTML示例底部的 <svg>元素，所以将应用渐变，并呈现蓝色渐变选中标记。那就是我所追求的。

但是，如果在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

https://stackoverflow.com/a/7118142/167911

但是，到目前为止，我还没有尝试过允许我引用外部 .svg文件中定义的线性渐变。

谢谢你的帮助!

Answer 1

经过更多研究，看来这是浏览器支持问题。看:

https://code.google.com/p/chromium/issues/detail?id=109212

https://bugs.webkit.org/show_bug.cgi?id=105904

可悲的是，在发布我的文章之前，我曾遇到过 this question，并曾肯定地认为，在5-1/2年内，浏览器支持会 catch 来-但事实并非如此。

截至2015年，显然Firefox和Opera是仅有的两种以任何实质性方式支持此功能的浏览器。

回到绘图板...