为什么这个 SVG 滤镜动画在 Edge 或 Chrome 中不起作用？ [复制]答案

【问题标题】：Why does this SVG filter animation not work in Edge or Chrome? [duplicate]为什么这个 SVG 滤镜动画在 Edge 或 Chrome 中不起作用？ [复制]
【发布时间】：2019-03-12 14:42:38
【问题描述】：

我已经创建了这个 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 中不起作用？

【问题讨论】：

bugs.chromium.org/p/chromium/issues/detail?id=109224
但请注意，如果您的 svg 仅由这一种形状组成（即，如果您可以在整个 svg 图像上应用过滤器），那么 Chrome 至少支持根上的 CSS 过滤器 <svg>节点。

标签： html google-chrome svg css-animations microsoft-edge

【解决方案1】：

正如 @Kaiido 在 cmets 中提到的，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>

【讨论】：