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

所有归功于@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过滤器的Bug跟踪器：https
://bugs.chromium.org/p/chromium/issues/detail
? id
=
109224