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

一尘不染

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

css

据我了解，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/

阅读 365

2020-05-16

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

2020-05-16