SVG 动画 G 元素

我目前正在学习如何使用 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> tag.
是否可以将其动画化<g> tag?

如果所有的孩子都有相同的动画和相同的时间，那就太好了。
现在我必须为每个路径提供一个类，如果我运行一个复杂的 svg 文件，这会花费很多时间。

分组进行会节省很多时间。

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

对的，这是可能的。你尝试过吗？

Demo:

@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>