html - 未应用外部文件中的 SVG 过滤器

Question

在我的 Assets 目录中名为 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 存在，因为当我进入检查器并单击链接时，它会将我带到一个实际页面，其中 svg 在 gray.svg 中定义。

此外，如果我没有外部 .svg 文件，我只是将滤镜放在 body 顶部并将 svg 图像中的滤镜更改为 #grayscale 它有效。

我不知道为什么它不起作用。有人可以帮帮我吗？

Plunker

Answer 1

看起来你已经发现了 this bug in Chromium :

Issue 109212: SVG (filter | fill | stroke | clip-path | mask) from external files not applied

What steps will reproduce the problem?

1. Define a filter in an SVG file, assign it an ID.
2. Embed some SVG in an HTML file.
3. Use the CSS directive "filter: url(file#id)" to reference the filter in the SVG file.

What is the expected result? The filter should be applied.

What happens instead? No filter is applied.

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