Как применить фильтр 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 есть)

• КНБ встроенный в html.index по style элемента

в какой расширение файла фильтр должен быть сохранен?

Как я могу ссылаться на этот файл в коде css?

Answer 1

Вы должны включить фильтр в документ SVG (вы также можете вставить его в свой документ XHTML), тогда вы можете просто ссылаться на него в свойстве фильтра CSS по его URL-адресу, например: filter: url(myfilter.svg#filterID).

В WebKit однако он работает только в том случае, если фильтр SVG встроен в документ.