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>