SVG动画G-元素
SVG动画G-元素
提问于 2016-11-25 09:27:06
我目前正在学习如何用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/
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-25 09:35:09
是的是可能的。你试过了吗？
演示：
@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40801538
复制相关文章
相似问题
腾讯云开发者
