Как использовать внешний SVG для CSS filter:url()?

У меня есть HTML-документ. Я могу добавить в CSS, но не в сам HTML.

Я пытаюсь применить фильтр SVG к изображениям, используя свойство filter:url(). Поскольку я не могу коснуться HTML, я не могу добавить <svg><defs><filter></filter></defs></svg>. Вместо этого я пытаюсь ссылаться на него извне, что, по-видимому, возможно.

Мой SVG находится по адресу http://puu.sh/m1UcD/bba51a3b3d.svg, и он содержит следующий текст:
<filter id="colorMatrix"> <feColorMatrix type="matrix" values="1 0 0 -0.2 -0.1, 0 5 0 0 -0.1, 0 0 1 -0.2 -0.1, 0 0 0 1 0"/> </filter>

Я попытался использовать
filter:url(http://puu.sh/m1UcD/bba51a3b3d.svg#colorMatrix); -webkit-filter:url(http://puu.sh/m1UcD/bba51a3b3d.svg#colorMatrix);
в качестве свойства CSS, но эффект не отображается.


person snazzybouche    schedule 20.12.2015    source источник
comment
Внешние ссылки работают в FF, но не работают в Chrome.   -  person Paul LeBeau    schedule 20.12.2015
comment
Кроме того, такую ​​ссылку следует делать внутри документа svg, а не внутри текстового элемента с расширением .svg.   -  person Kaiido    schedule 20.12.2015