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>