在外部文件中引用SVG过滤器不起作用

Question

我一直在寻找其他问题，但无济于事我找到了解决方案。我觉得我可能不会将svg文件放在正确的位置，以便css / html访问它

目前，我的HTML文件旁边有一个.svg文件。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

我的css文件看起来像这样

.blur {
filter: url(#blur);
}

我可能没有给出正确的模糊位置？

Answer 1

如果您的SVG不在HTML文件中，那么您不能只使用url(#blur)。您需要使用类似url(my_svg_file.svg#blur)的内容。

但如果我没记错的话，那些外部文件引用无论如何都不能在所有浏览器中正常工作。因此，您应该将SVG的内容移动到HTML文件中，并将CSS保留为url(#blur)。

Answer 2

不确定你要做什么，但.blur {}是指类模糊，而不是过滤器中使用的id模糊。要将CSS添加到过滤器，请尝试#blur {}。