如何将SVG过滤器应用于元素？

Question

我想将以下过滤器应用于我的html页面中的某个链接元素： 我的网页在Chrome上运行。 （我发现在网上某处过滤了）

<filter id="tf" filterRes="172"> 
    <feImage xlink:href="noise.jpg"> 
    <feComposite in2="SourceGraphic" operator="arithmetic" k1="1"> 
    <feMorphology operator="erode" radius="30"> 
</filter>

• 我将noise.jpg作为根文件夹中的文件（我的index.html所在的位置）

• css由style元素

嵌入到html.index中

应该在哪个文件扩展名中保存过滤器？

如何在css代码中引用该文件？

Answer 1

您必须在SVG文档中包含过滤器（您也可以将其嵌入到XHTML文档中），然后您可以通过其URL在CSS过滤器属性中引用它，如下所示：filter: url(myfilter.svg#filterID)。

在WebKit上，只有在文档中嵌入了SVG过滤器时，它才有效。