html - 为什么这个 SVG 滤镜动画在 Edge 或 Chrome 中不起作用？

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>