Question

我有一个相当简单的设置，我想通过使用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="" />

Please see the attached codepen for details

它在firefox和chrome中工作，但我似乎无法在safari中找到问题。根据caniuse，支持应该没问题。

Answer 1

所以，这看起来很愚蠢 - 但这是你的过滤器中的初始换行符。将其更正为：

<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在任何位置都无法处理值数组中的换行符 - 你必须将它们全部放在一行上。）

SVG feColorMatrix在safari中不起作用

1 个答案: