SVG feColorMatrix 在 safari 中不起作用



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

详情请看附件。

它可以在firefox和chrome中工作,但我在safari中似乎找不到问题。根据caniuse,支持应该没问题。

所以,这看起来很傻-但这是过滤器中初始的换行符。修改为:

<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一度无法处理value数组中任何位置的换行符——您必须将它们全部放在一行中。)

相关内容

  • 没有找到相关文章

最新更新