SVG动画G元素 [英] SVG Animation G-element

问题描述

我目前正在学习如何使用CSS为svg对象设置动画。

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

组合在一起的路径显示在< ; g> 标签。

是否可以对< g> 标签进行动画处理？

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

如果所有孩子都具有相同的动画并且具有相同的时间，那就太好了。

现在，我必须给每条路径一个类，如果我这样做会花费很多时间运行一个复杂的svg文件。

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.

这是一个小提琴： https://jsfiddle.net/vvvwcrdy/

推荐答案

是可以的。您尝试过吗？

Yes it is possible. Did you try it?

演示：

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

这篇关于SVG动画G元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！