为什么Chrome不显示SVG使用<use>和Filter =＆＃34; url（#id）＆＃34;属性？

Question

背景

我有一组SVG图标都有阴影。要在Chrome中使用此功能，我无法使用filter:drop-shadow。我必须使用filter:url(#drop-shadow)，并在<defs>部分中定义投影。

我在页面上也有这些图标的多个实例（它们是文件列表中的文件类型图标），因此我使用<use>来保持页面干净。

代码

外部SVG文件

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
            ..... more filter lines, shortened for brevity
        </filter>
    </defs>
    <symbol id="download-pdf">
        <path filter="url(#drop-shadow)" d="" fill="">...</path>
    </symbol>
    <symbol id="download-zip">
        ..... another icon
    </symbol>
    ... more icons
</svg>

页面上的内联SVG

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>

请参阅此处的最小工作示例：http://h.andymercer.net/chrome-svg-bug/

问题

问题是Chrome没有找到#drop-shadow链接，因此打破了图标。相反，Firefox会完美地显示图标。

火狐：

铬：

如果您注意到，Chrome屏幕截图会显示图标的某些部分。它显示的部分不使用投影滤镜。

我无法弄清楚为什么会这样，因为投影位于与<defs>位于同一页面的<symbol>中。

问题

我有什么遗漏，或者这是Chrome的错误吗？

修改

根据评论，我被要求提供MCVE。我没有这样做，因为问题本质上需要外部URL，这在这里通常不赞成。但是，为了证明这个问题，请看一下：

http://h.andymercer.net/chrome-svg-bug/

在Firefox中，您可以看到图标。在Chrome中，它是空白的。

Answer 1

在Chrome中，<defs>必须位于同一<svg>内。 在你的情况下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
        </filter>
    </defs>
    <symbol id="download-pdf">
        <path filter="url(#drop-shadow)" d="" fill="">...</path>
    </symbol>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download-pdf"></use>
</svg>

符合现代浏览器功能，创建不同的外部svg文件（每个图标一个，然后使用<object>或<img>标记嵌入它们）更简单，更清晰。

<object>允许javascript通过DOM访问和修改SVG代码，而<img>嵌入SVG拒绝DOM访问它们。因此，在您的情况下使用<img>应该是更好的选择。