SVG动画G元素

Question

我目前正在学习如何使用CSS来动画svg对象。

我现在知道如何制作动画的路径有：组合在一起

@keyframes stroke_fill { 
    0% { 
     fill: white; 
    } 
    50% { 
     fill: white; 
     stroke-dashoffset: 0; 
    } 
    100% { 
     fill: black; 
     stroke-dashoffset: 0; 
    } 
} 

.animation{ 
    animation: stroke_fill 4s ease forwards; 
    stroke-dasharray: 324.774; 
    stroke-dashoffset: 324.774; 
} 

路径在<g>标签所示。
是否可以动画<g>标记？

如果所有的孩子都有相同的动画和同一时间，这将是很好的。
现在我必须给每一个路径一个类，如果我运行一个复杂的svg文件需要很多时间。

按组来做会节省很多时间。

这里是一个小提琴：https://jsfiddle.net/vvvwcrdy/

Answer 1

是的，它是可能的。你试过了吗？

演示：

@keyframes stroke_fill { 
 
    0% { 
 
     fill: white; 
 
    } 
 
    50% { 
 
     fill: white; 
 
     stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
     fill: black; 
 
     stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
.animation{ 
 
    animation: stroke_fill 4s ease forwards; 
 
    stroke-dasharray: 324.774; 
 
    stroke-dashoffset: 324.774; 
 
    stroke: red; 
 
    stroke-width: 10; 
 
}

<svg> 
 
    <g class="animation"> 
 
    <rect x="20" y="20" width="120" height="120" /> 
 
    <rect x="160" y="20" width="120" height="120" /> 
 
    </g> 
 
</svg>