SVG组上的CSS动画 [英] CSS Animation on SVG group

问题描述

与我在这里提到的问题不同，我仅在使用JS时尝试使用CSS来获得动画效果.我很高兴用动画滤镜实现相同的目的，但是我不知道该怎么做.

Unlike the question I was referred to here, i am trying to get the animation effect with CSS only as I apply it with JS. I am happy to achieve the same thing with a animated filter but I do not know how.

为什么我的CSS动画不能在SVG小组上使用?如果我将其应用于SVG本身，它确实可以工作.按照此处的示例，如何使用CSS为SVG中的组设置动画. 也在此处填充.

Why is my CSS animation not working on the SVG group? It does work if I apply it to the SVG itself. How do I animate a group within the SVG with CSS per the example here. 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过滤器.我的意思是这里的SVG子元素.

Which browser are you testing in? Not all browsers support CSS filters on SVG elements. By that I mean SVG child elements here.

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

Firefox does, but I think it might be the only one.

内联的应用于根<svg>元素的过滤器将在Chrome中运行，因为该过滤器实际上被视为HTML元素.

A filter applied to a root <svg> element, that is inlined, will work in Chrome, because that is effectively being treated as an HTML element.

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

要过滤<g>元素，您需要使用SVG <filter>，但是这些过滤器元素的值无法使用CSS设置动画.

To filter a <g> element, you would need to use an SVG <filter>, but the values of those filter elements can't be animated with CSS.

这篇关于SVG组上的CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！