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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

所有归功于@Robert Longson，他给出了答案：

但是，可以通过一些额外的工作将它们重新实现为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

以上是 为什么CSS过滤器不适用于Chrome中的SVG元素？ 的全部内容， 来源链接： utcz.com/qa/398895.html

回到顶部