SVG Animation G-element

问题:

I'm currently learning how to animate svg objects with CSS.

I know now how to animate a path with:

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

Paths that are grouped together are shown in a <g> tag.
Is it possible to animate the <g> tag?

If all children have the same animation and the same time it would be nice.
Now I have to give every single path a class which takes a lot of time if I run a complex svg file.

Doing it by group would save a lot of time.

Here is a Fiddle: https://jsfiddle.net/vvvwcrdy/

回答1:

Yes it is possible. Did you try it?

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>