Html 未应用外部文件中的SVG筛选器

在我的资产目录中名为

gray.svg

的文件中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

在我的html中，我有

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <image filter="url(assets/gray.svg#grayscale)"xlink:href="assets/images/linux.png" x="0" y="0" width="100%" height="100%"></image>
</svg>

我知道存在

assets/gray.svg#grayscale

，因为当我进入inspector并单击链接时，它会将我带到一个实际页面，该页面包含

gray.svg

中定义的svg

此外，如果我没有一个外部的

.svg

文件，我只需将过滤器放在我的身体顶部，并将svg图像中的过滤器更改为灰度即可

我不知道为什么它不起作用。谁能帮帮我吗

---

看起来您已经发现：

第109212期：SVG（过滤器|填充|笔划|剪辑路径|遮罩） 未应用外部文件

哪些步骤会重现问题？

在SVG文件中定义一个过滤器，并为其分配一个ID

在HTML文件中嵌入一些SVG

使用CSS指令“filter:url（file#id）”引用SVG文件中的过滤器

预期结果是什么？应该应用过滤器

会发生什么情况？未应用任何筛选器

---

您的示例在Firefox中运行正常。

2020年5月：仍然无法在Chrome和Edge Chrome中运行。Firefox完成了这项工作。