Question

在我的page.html我有一个svg元素调用另一个svg文件：

<!doctype html><body bgcolor="#666">
<svg><use xlink:href="drawings.svg#draw1"/></svg>

这是drawings.svg文件：

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:rgba(0,0,0,0.3)" />
        <stop offset="100%" style="stop-color:rgba(200,200,200,0.3)" />
    </linearGradient>
    <symbol id="draw1">
        <circle cx="50%" cy="50%" r="20%" fill="white" />
        <circle cx="50%" cy="50%" r="15%" fill="url(#grad1)"/>
    </symbol>
</defs>
</svg>

这在Firefox 56.0.1中非常有效：

另一方面，Chrome 61没有应用渐变;它只显示白色圆圈：

还有另一种方法来引用我在drawings.svg中定义的渐变吗？

Chrome不使用外部svg文件的defs

0 个答案: