Question

在我的资产目录中名为gray.svg的文件中，我有

<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>

在我的HTML中我有

assets/gray.svg#grayscale

我知道#grayscale存在，因为当我进入检查器并单击链接时，它会将我带到一个实际页面，其中包含在gray.svg中定义的svg。

此外，如果我没有外部的.svg文件，我只是将过滤器放在我的身体顶部并将svg图像中的过滤器更改为.container { display: flex; flex-direction: row; align-items: stretch; /* Align height */ } .item { border: 1px solid red; width: 50%; } .item:first-child { background-image: url('http://placekitten.com/g/200/300'); background-repeat: no-repeat; background-size: cover; /* Make the image cover the div */ background-position: 50% /* Center the image inside the div */ }它就可以了。

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

Plunker

Answer 1

您似乎发现了this bug in Chromium：

问题109212：SVG（filter | fill | stroke | clip-path | mask）来自   未应用外部文件

哪些步骤会重现此问题？


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

在HTML文件中嵌入一些SVG。

使用CSS指令＆＃34; filter：url（file＃id）＆＃34;引用SVG文件中的过滤器。

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

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

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

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

1 个答案: