SVG feColorMatrix doesn't work in safari

Question

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="" />

Please see the attached codepen for details.

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.

Answer 1

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
                       "
               />

... 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.)