SVG feColorMatrix 在 Safari 中不起作用答案

【问题标题】：SVG feColorMatrix doesn't work in safariSVG feColorMatrix 在 Safari 中不起作用
【发布时间】：2017-01-12 22:54:38
【问题描述】：

我有一个相当简单的设置，我想通过使用 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的说法，支持应该没问题。

【问题讨论】：

标签： svg svg-filters colormatrix

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

【讨论】：

太棒了...令人惊讶的是，矩阵中的换行符会破坏东西>_