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

Question

据我了解，CSS 过滤器 should work 在 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

2021 年 2 月编辑：Chrome 89 中 SVG 元素 will start working 的 CSS 过滤器，如果一切按计划进行的话！