Сделать все изображения сепия svg код не работает?

Итак, я хотел сделать все изображения с эффектом сепии, однако код, который я использую для оттенков серого в SVG, при изменении на сепию не работает...

Это оттенки серого: a img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' 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></svg>#grayscale"); }

А это сепия, которая не работает img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id="sepia"><feColorMatrix type='matrix' values='0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0'/></filter></svg>#sepia"); }

Может ли кто-нибудь сказать мне, что не так с кодом сепии?

И поскольку я спрашиваю, есть ли способ сделать изображения как в сепии, так и в градациях серого и поиграть с непрозрачностью, как с помощью веб-набора, где я могу сделать это -webkit-filter: grayscale(1) sepia (0.2);?


svg css svg-filters
person MSmS    schedule 01.11.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я предполагаю двойные кавычки в [id="sepia"]. Кроме того, ваши значения для сепии кажутся немного неверными. Это лучшее место для начала сепии:

       "0.30 0.30 0.30 0 0
        0.25 0.25 0.25 0 0
        0.20 0.20 0.20 0 0
        0.00 0.00 0.00 1 0"

Что касается вашего другого вопроса, вы можете использовать <animate> для анимации между значениями цветовой матрицы, но анимация svg не работает в IE (даже IE10), поэтому вам придется написать что-то, что имеет смысл. (Обновление — вы можете попробовать библиотеку javascript FakeSMIL для IE — она может работать с большинством SMIL.)

person Michael Mullany    schedule 01.11.2012