如何将SVG过滤器应用于元素? [英] How to apply SVG filter to an element?

问题描述

我想将以下过滤器应用于我的html页面中的某些链接元素: 我的网页在Chrome上运行. (我发现该过滤器位于网上的某个地方)

I want to apply the following filter to some link element in my html page: My web page running on Chrome. (I found that filter somewhere on the net)

<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所在的位置)中

  • I got the noise.jpg as a file in the root folder (where my index.html is)

    css通过style元素嵌入在html.index中

    The css is embedded in the html.index by the style element

    应将过滤器保存在哪个文件扩展名中?

    In what file extension the filter should be saved?

    如何在CSS代码中引用该文件?

    How can I refer to that file in the css code?

    推荐答案

    您必须将过滤器包含在SVG文档中(也可以将其嵌入到XHTML文档中)，然后可以在CSS过滤器中简单地引用它属性的网址，例如:filter: url(myfilter.svg#filterID).

    You have to include the filter in a SVG document (you can also embed it in your XHTML document), then you can simply refer to it in your CSS filter property by its URL, like this: filter: url(myfilter.svg#filterID).

    但是在WebKit上，只有将SVG过滤器嵌入到文档中时，它才起作用.

    On WebKit however it works only if the SVG filter is embedded in the document.

    这篇关于如何将SVG过滤器应用于元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！