Question

我已经创建了这个SVG和过滤器动画。盒子应该不断地改变颜色。

@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }

  to {
    filter: hue-rotate(-360deg);
  }
}

.hex {
    fill-opacity: 1.0;
    animation: hue 5s infinite linear;
}

<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <polygon class="hex" points="0,0 300,0 300,300 0,300" fill="red"></polygon>
  
</svg>

在Firefox 62中有效。

在Edge 17和Chrome 69中，我看到一个红色矩形。

为什么这在Edge和Chrome中不起作用？

Answer 1

正如评论中提到的 @Kaiido 所述，Chrome / Edge当前不支持单个SVG元素上的CSS过滤器，但是将过滤器应用于整个SVG可以在两种浏览器上使用，如您所见这个例子：

@keyframes hue {
  from {
    filter: hue-rotate(50deg);
  }

  to {
    filter: hue-rotate(-360deg);
  }
}

.hex {
    fill-opacity: 1.0;
    animation: hue 5s infinite linear;
    filter: hue-rotate(50deg);
}

<svg class="hex" id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <polygon points="0,0 300,0 300,300 0,300" fill="red"></polygon>
  
</svg>

为什么此SVG过滤器动画在Edge或Chrome中不起作用？

1 个答案: