为什么CSS过滤器不适用于Chrome中的SVG元素? [英] Why don't CSS filters work on SVG elements in Chrome?

问题描述

据我了解，CSS过滤器应该在Chrome中的任何地方工作，但我无法使它们适用于SVG元素.

As far as I understand, CSS filters should work anywhere in Chrome, but I fail to make them apply to SVG elements.

这在大多数浏览器中都可以正常使用:

This works fine in all most browsers:

div{ filter:sepia(50%) }

但是，这不适用于Chrome:

However, this will not work in 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/

...and here is a fiddle: https://jsfiddle.net/LtffLagn/2/

推荐答案

所有归功于 @Robert Longson ，谁给出了答案: CSS过滤器无法应用于Chrome中的SVG元素.但是，可以通过一些额外的工作将它们重新实现为SVG过滤器.这就是我最终得到的:

All credit to @Robert Longson, who gave the answer: CSS filters can not be applied to SVG elements in Chrome. They can, however, be re-implemented as SVG filters, with some extra work. This is what I ended up with:

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过滤器.

Firefox will now use the CSS filter, and Chrome the SVG filter. Of course, if you manage to make the SVG filter work the way you want, you could just stick with that. For me, I never managed to get exactly the effect I wanted, so I let Firefox use the better looking CSS filter.

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

Bug tracker for CSS filters on SVG elements in Chrome/ium: https://bugs.chromium.org/p/chromium/issues/detail?id=109224

这篇关于为什么CSS过滤器不适用于Chrome中的SVG元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！