我有一个相当简单的设置,我想通过使用svg滤镜来改变svg图像的颜色:
<svg style="height: 0;">
<filter id="hover" color-interpolation-filters="sRGB"
x="0" y="0" height="100%" width="100%">
<feColorMatrix type="matrix"
values="
0 0 0 0 0
0 0 0 0 0.68
0 0 0 0 0.94
0 0 0 1 0
"
/>
</filter>
</svg>
<img style="-webkit-filter: url('#hover'); filter: url('#hover');"
src="https://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg" alt="" />
详情请看附件。
它可以在firefox和chrome中工作,但我在safari中似乎找不到问题。根据caniuse,支持应该没问题。
所以,这看起来很傻-但这是过滤器中初始的换行符。修改为:
<feColorMatrix type="matrix"
values="0 0 0 0 0
0 0 0 0 0.68
0 0 0 0 0.94
0 0 0 1 0
"
/>
…完美的工作。(顺便说一下,IE一度无法处理value数组中任何位置的换行符——您必须将它们全部放在一行中。)