Нужно применить svg фильтр к изображению на сайте. В статьях интернета вроде-бы неплохо описано, но даже их примеры не срабатывают.
Делаю так - есть файл /css/filter.svg
<svg id="image" version="1.1" xmlns="http://www.w3.org/2000/svg" height="0">
<defs>
<filter id="contrast">
<fegaussianblur stddeviation="1.5"/>
<fecomponenttransfer>
<fefuncr type="discrete" tablevalues="0 .5 1 1"/>
<fefuncg type="discrete" tablevalues="0 .5 1"/>
<fefuncb type="discrete" tablevalues="0"/>
</fecomponenttransfer>
</filter>
<filter id="brightness">
<fecomponenttransfer>
<fefuncr type="linear" slope="5"/>
<fefuncg type="linear" slope="5"/>
<fefuncb type="linear" slope="5"/>
</fecomponenttransfer>
</filter>
<filter id="grayscale">
<fecolormatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
<filter id="saturate">
<fecomponenttransfer>
<fefuncr tablevalues="1 .33 .33" type="table"/>
<fefuncg tablevalues=".33 1 .33" type="table"/>
<fefuncb tablevalues=".33 .33 1" type="table"/>
</fecomponenttransfer>
</filter>
<filter id="hue-rotate">
<fecomponenttransfer>
<fefuncr type="table" tablevalues="1 0"/>
<fefuncg type="table" tablevalues="1 0"/>
<fefuncb type="table" tablevalues="1 0"/>
</fecomponenttransfer>
</filter>
<filter id="sepia">
<fecomponenttransfer>
<fefuncr tablevalues="0.15 .25" type="table"/>
<fefuncg tablevalues=".01 .25" type="table"/>
<fefuncb tablevalues="0 .09" type="table"/>
</fecomponenttransfer>
</filter>
<filter id="invert">
<fecomponenttransfer>
<fefuncr type="table" tablevalues="1 0"/>
<fefuncg type="table" tablevalues="1 0"/>
<fefuncb type="table" tablevalues="1 0"/>
</fecomponenttransfer>
</filter>
<filter id="blur">
<fegaussianblur stddeviation="2" result="outBlur"/>
</filter>
</defs>
</svg>
Есть картинка
<img src='/i/logo.jpg' id="imgForTest" />
добавляю стиль
#imgForTest{-webkit-filter: url('/css/filter.svg#sepia');}
и ничего....
в network видно что обращение к filter.svg есть, но сепия не проявляется...
Браузер Chrome Версия 40.0.2214.115 m
Простой
