SVG 动画 G 元素答案

【问题标题】：SVG Animation G-elementSVG 动画 G 元素
【发布时间】：2017-04-09 15:37:32
【问题描述】：

我目前正在学习如何使用 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/

【问题讨论】：

嗨，你可以分享任何小提琴或 html 吗？所以得到更好的想法。

标签： css animation svg

【解决方案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>

【讨论】：

嗯，很有趣，所以他们继承了值是吗？
是的。 <g> 元素代表一个逻辑分组。不是物理的。组是提供其所有后代继承的属性的一种方式。
非常感谢！直到现在我才知道:)
谢谢。我现在看到这确实是可能的。我试过了，但发现我是在多边形上这样做的......我的错......再次感谢你。