Question

据我了解，CSS会在Chrome中的任何位置过滤should work，但我无法将其应用于SVG元素。

这在所有大多数浏览器中都可以正常工作：

div{ filter:sepia(50%) }

但是，这在Chrome中无效：

rect{ filter:sepia(50%) }

以下是一个例子：

＆＃13;

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%);
}

＆＃13;

<h2>SVG</h2>
<svg width="100" height="50">
    <rect x="0" y="0" width="100" height="50"/>
</svg>


<h2>DIV</h2>
<div></div>

＆＃13;

......这是一个小提琴：https://jsfiddle.net/LtffLagn/2/

Answer 1

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

＆＃13;

library(zoo)
rr <- t(rollapply(t(x), by.column=TRUE, width=3,
                  FUN=function(z) coef(lm(z ~ c(1,2,3)))[2]))

＆＃13;

rect{
  fill:red;
}
rect:hover{
    filter:url("#sepia");
    filter:sepia(100%);
}

＆＃13;

Firefox现在将使用CSS过滤器，Chrome则使用SVG过滤器。当然，如果你设法使SVG过滤器按照你想要的方式工作，你可以坚持下去。对我来说，我从来没有设法得到我想要的效果，所以我让Firefox使用更好看的CSS过滤器。

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

为什么CSS过滤器不能在Chrome中使用SVG元素？

1 个答案: