SVG feColorMatrix 在 safari 中不起作用

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 中不起作用

SVG feColorMatrix doesn't work in safari

svg

svg-filters

colormatrix