Interactive Interactive - 7 days ago 5
CSS Question

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/

Answer

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>

Comments