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

Posted 2023-03-06

【中文标题】为啥 Chrome 不显示带有 <use> 和 Filter="url(#id)" 属性的 SVG？

【英文标题】：Why Doesn't Chrome Display SVG's with <use> and Filter="url(#id)" Attributes?为什么 Chrome 不显示带有 <use> 和 Filter="url(#id)" 属性的 SVG？

【发布时间】：2016-08-15 03:09:10

【问题描述】：

背景

我有一组带有阴影的 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 错误？

编辑

每个 cmets，我被要求提供 MCVE。我没有这样做，因为这个问题本质上需要外部 URL，这通常在这里不受欢迎。然而，为了演示这个问题，看看这个：

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

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

【问题讨论】：

MCVE 在这里很有用。您确定 id "drop-shadow" 在页面上是唯一的吗？

我添加了一个 MCVE，Paul。对于罗伯特，我看到了那个错误，但我认为它不适用。过滤器将应用于与过滤器存在相同的 URL 中的符号。

【参考方案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> 应该是更好的选择。