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

Question

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

此外,如果我没有外部的.svg文件,我只是将过滤器放在我的身体顶部,并将svg图像中的过滤器更改为#grayscale正常工作.

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

Plunker

Answer 1

看起来你在Chromium中发现了这个错误:

问题109212:来自未应用的外部文件的SVG(filter | fill | stroke | clip-path |掩码)

哪些步骤将重现该问题？

1. 在SVG文件中定义过滤器,为其分配ID.
2. 在HTML文件中嵌入一些SVG.
3. 使用CSS指令"filter:url(file#id)"来引用SVG文件中的过滤器.

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

会发生什么？没有应用过滤器.

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