Мне нужно изменить цвет изображения SVG с помощью css filters url ().
Когда я пытался использовать его с существующим HTML svg, он отлично работает:
https://jsfiddle.net/MartaPetrella/gvm2a9ud/1/
#svg-image { filter: url(#invert); }
<svg id="svg-image-invert">
<image id="svg-image" width="150" height="150" xlink:href="https://image.flaticon.com/icons/svg/52/52903.svg" />
<filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.21569 0 0 0 0 0.67843 0 0 0 0 0.61176 0 0 0 1 0" /> </filter> </svg>
... но если я использую вместо этого CSS data: svg, он будет работать только в браузере webkit.
https://jsfiddle.net/MartaPetrella/f62gdxnr/52/
#svg-image {
width: 100px;
-webkit-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'> <defs> <filter id='co0_255_0'> <feColorMatrix in='SourceGraphic' type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 ' /> </filter> </defs> </svg>#co0_255_0");
filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'> <defs> <filter id='co0_255_0'> <feColorMatrix in='SourceGraphic' type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 ' /> </filter> </defs> </svg>#co0_255_0");
}
<image id='svg-image' src="https://image.flaticon.com/icons/svg/52/52903.svg" />
Интересно, почему ... В обоих случаях я использую фильтр url (), почему в случае он не работает? Я очень смущен по этому поводу.