为什么 Chrome 不显示带有 <use> 和 Filter="url(#id)" 属性的 SVG？

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>应该是更好的选择。