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

Question

As far as I understand, CSS filters should work anywhere in Chrome, but I can't apply them to SVG elements.

This works great in all most browsers:

div{ filter:sepia(50%) }

However, this will not work in Chrome:

rect{ filter:sepia(50%) }

Here is an example:

div{
    width:100px;
    height:50px;
    background-color:red;
}
rect{
    fill:red;
}
rect:hover, div:hover{
    -webkit-filter:sepia(50%);
    -moz-filter:sepia(50%);
    filter:sepia(50%);
}

<h2>SVG</h2>
<svg width="100" height="50">
    <rect x="0" y="0" width="100" height="50"/>
</svg>


<h2>DIV</h2>
<div></div> 

Run codeHide result

... and here is the fiddle: https://jsfiddle.net/LtffLagn/2/

Answer 1

@Robert Longson, : CSS SVG Chrome. , , SVG, . , :

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>

Hide result

Firefox CSS, Chrome - SVG. , SVG , , . , , Firefox CSS-.