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屋！