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>