SVG feColorMatrix在Safari中不起作用 [英] SVG feColorMatrix doesn't work in safari
问题描述
我有一个相当简单的设置,我想通过使用svg滤镜来更改svg图像的颜色:
I have a fairly simple setup where I want to alter the color of the svg image by using an svg filter:
<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中使用,但我似乎在野生动物园中找不到问题.根据犬的说法,应该没问题.
It's working in firefox and chrome, but I can't seem to find the problem in safari. According to caniuse, support should be ok.
推荐答案
因此,这似乎很愚蠢-但这是过滤器中的初始换行符使它无法正常运行.将其更正为:
So, this is going to seem silly - but it's the initial linebreak in your filter that's throwing it off. Correcting it to:
<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无法在任何位置处理values数组中的换行符-您必须将它们全部放在一行上.)
... works perfectly. (Incidentally, at one point, IE couldn't handle linebreaks in the values array in any position - you had to put them all on one line.)
这篇关于SVG feColorMatrix在Safari中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!