为什么CSS过滤器不适用于Chrome中的SVG元素？

Question

据我所知,CSS过滤器应该可以在Chrome中的任何位置使用,但我无法将它们应用于SVG元素.

这适用于所有大多数浏览器:

div{ filter:sepia(50%) }

但是,这在Chrome中不起作用:

rect{ filter:sepia(50%) }

这是一个例子:

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> 

...这里有一个小提琴:https://jsfiddle.net/LtffLagn/2/

Answer 1

归功于@Robert Longson,他给出了答案:CSS过滤器无法应用于Chrome中的SVG元素.但是,它们可以作为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>

Firefox现在将使用CSS过滤器,Chrome则使用SVG过滤器.当然,如果你设法使SVG过滤器按照你想要的方式工作,你可以坚持下去.对我来说,我从未设法得到我想要的效果,所以我让Firefox使用更好看的CSS过滤器.

针对Chrome/ium中SVG元素的CSS过滤器的错误跟踪器:https://bugs.chromium.org/p/chromium/issues/detail ？ id = 109224