SVG动画 G元素

Question

SVG动画 G元素

4

我目前正在学习如何使用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 文件，这将花费很多时间。

通过分组来实现可以节省大量时间。

这里是一个 Fiddle 示例：https://jsfiddle.net/vvvwcrdy/

- Interactive

你好，你能分享任何JSFiddle或HTML代码吗？这样我可以更好地理解。 - Kiran Khatri

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

是的，这是可以做到的。你试过吗？

演示：

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