我一直在尝试将SVG图标外部化到一个文件，并使用标记（如<svg><use xlink:href="file.svg#icon" /></svg>）引用它们。从理论上讲，这很好地工作，但不同的浏览器在渲染方面存在问题。当引用文件中带有<use>的符号并直接打开SVG文件的URL时，所有浏览器都能够正确地呈现SVG。
简而言之，当引用标记中带有linearGradient的符号时，有没有一种跨浏览器的方法让svg<svg><use/></svg>s作为元素的填充？
我设置了一个抢劫者来演示这个问题：
http://plnkr.co/edit/feKvZ7?p=preview
简化后，标记如下：
<!DOCTYPE html>
<html>
<body>
<h1>SVG sprite test</h1>
<svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="icon.svg#icon" />
</svg>
</body>
</html>
SVG文件如下：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
<symbol id="icon" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
</symbol>
<use id="iconuse" xlink:href="#icon" width="100" height="100" />
</svg>
这就是它在不同浏览器中的样子：
最佳答案
尝试下一个（Inkscape是如何实现渐变的）：
<linearGradient id="gradient">
<stop
style="stop-color:black;"
offset="0"/>
<stop
style="stop-color:white;"
offset="1" />
</linearGradient>
...
<path
style="fill:url(#gradient); ...