Why Don't CSS Filters Work on Svg Elements in Chrome

Why don't CSS filters work on SVG elements in Chrome?

All credit to @Robert Longson, who gave the answer: CSS filters can not be applied to SVG elements in Chrome. They can, however, be re-implemented as SVG filters, with some extra work. This is what I ended up with:

rect{
  fill:red;
}
rect:hover{
    filter:url("#sepia");
    filter:sepia(100%);
}

    <svg width="100" height="50">
      <defs>
        <filter id="sepia">
          <feColorMatrix type='matrix' values='0.30 0.30 0.30 0.0 0
                                               0.25 0.25 0.25 0.0 0
                                               0.20 0.20 0.20 0.0 0
                                               0.00 0.00 0.00 1 0'/>
        </filter>
      </defs>
      <rect x="0" y="0" width="100" height="50"/>
    </svg>

Why does this SVG filter animation not work in Edge or Chrome?

As @Kaiido mentioned in the comments, Chrome/Edge currently do not support CSS filters on individual SVG elements, but applying a filter to the entire SVG works on both browsers, as you can see in this example:

@keyframes hue {  from {    filter: hue-rotate(50deg);  }
  to {    filter: hue-rotate(-360deg);  }}
.hex {    fill-opacity: 1.0;    animation: hue 5s infinite linear;    filter: hue-rotate(50deg);}

<svg class="hex" id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">    <polygon points="0,0 300,0 300,300 0,300" fill="red"></polygon>  </svg>

SVG filter not showing up in Firefox, working fine in Chrome

There's an input called coloredOut but no output called coloredOut so the filter chain fails. Removing the in="coloredOut" attribute seems to fix that. You might want to raise a Chrome bug that it's not enforcing valid filter chains.

In addition the SVG pushes the text down so you can't see it in the codepen. Adding width="0" height="0" to the <svg> element fixes that issue.

SVG filter different in Chrome

Move that "color-interpolation-filters='sRGB' into your filter element and you'll get a consistent result. Firefox/Safari or Chrome seem to be using sRGB for the entire filter (in spite of it only being declared for the feComponentTransfer). I don't know which one is doing it wrong.

SVG filter doesn't work at all

Your root SVG element has no namespace. You need your root element to be

<svg xmlns="http://www.w3.org/2000/svg">

How do I get filters to work on nested SVGs?

You can use svg filters. The sepiatone filter is from https://gist.github.com/jorgeatgu/5b338cc1a4e0df901348

svg{border:1px solid}
.icon:hover{    filter: url(#sepiatone);}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="sepiatone">  <feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0"/></filter></defs>      <svg x="10" class="icon">        <rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>      </svg>      <svg x="200">        <rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/>      </svg>    </svg>

Why Don't CSS Filters Work on Svg Elements in Chrome