gpt4 book ai didi

css - SVG 动画 G 元素

转载 作者:行者123 更新时间:2023-12-03 21:29:23 25 4
gpt4 key购买 nike

我目前正在学习如何使用 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> 设置动画标签?

如果所有 child 都有相同的动画和相同的时间,那就太好了。
现在,如果我运行一个复杂的 svg 文件,我必须为每条路径指定一个类,这将花费大量时间。

分组进行会节省很多时间。

这是一个 fiddle : https://jsfiddle.net/vvvwcrdy/

最佳答案

对的,这是可能的。你试了吗?

演示:

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

关于css - SVG 动画 G 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40801538/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com