SVG组上的CSS动画答案

【问题标题】：CSS Animation on SVG groupSVG组上的CSS动画
【发布时间】：2017-09-06 21:08:48
【问题描述】：

与我在这里提到的问题不同，我试图仅在使用 JS 时使用 CSS 来获得动画效果。我很高兴用动画滤镜实现同样的效果，但我不知道如何。

为什么我的 CSS 动画在 SVG 组上不起作用？如果我将它应用于 SVG 本身，它确实有效。如何根据此处的示例使用 CSS 为 SVG 中的组设置动画。 FIDDLE here too.

.pulse {
  background: blue;
  width: 400px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {
    filter: brightness(1);
    filter: contrast(1);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
  }
  50% {
    filter: brightness(0.1);
    filter: contrast(0.1);
    -webkit-filter: brightness(0.1);
    -webkit-filter: contrast(0.1);
  }
  100% {
    filter: brightness(1);
    filter: contrast(1);
    -webkit-filter: brightness(1);
    -webkit-filter: contrast(1);
  }
}

【问题讨论】：

如果你想在svg元素上使用动画，请查看css-tricks.com/guide-svg-animations-smil。它可以帮助你
嗨@Ovidiu Unguru 感谢您提供链接。已经通读并认为这不仅仅是我想要实现的目标。我将其他类应用于g 元素，所以我不明白为什么这个类不起作用。
Animating an SVG Group的可能重复
我不明白为什么它不适用于g 元素。另一种方法仍然是 CSS。 stackoverflow.com/questions/40801538/svg-animation-g-element

标签： css svg

【解决方案1】：

您在哪个浏览器中进行测试？并非所有浏览器都支持 SVG 元素上的 CSS 过滤器。我的意思是这里的 SVG 子元素。

Firefox 有，但我认为它可能是唯一的。

应用于根<svg> 元素的过滤器（即内联）将在 Chrome 中工作，因为它实际上被视为 HTML 元素。

http://jsfiddle.net/strdyy77/9/

要过滤 <g> 元素，您需要使用 SVG <filter>，但这些过滤器元素的值无法使用 CSS 进行动画处理。

【讨论】：