像蜗牛一样的路径上的SVG动画 [英] SVG animation on path like the snail
本文介绍了像蜗牛一样的路径上的SVG动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下SVG,我想在移动后在路径上逐像素绘制圆圈。就像蜗牛走了一样,他在他身后留下了痕迹。所以我的问题是如何绘制浅红色的圆圈?
I have the following SVG and I would like to draw the circles pixel by pixel on the path after moveing. It's like when the snail goes he let a streak behind him. So my question is how to draw the light red circles?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 200" id="svgBox" style="background-color:#e4e4e4">
<path d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10" stroke="grey" stroke-width="1" fill="none" id="animateMotion"/>
<circle cx="" cy="" r="5" fill="red">
<animateMotion dur="6s" repeatCount="0">
<mpath xlink:href="#animateMotion"/>
</animateMotion>
</circle>
</svg>
推荐答案
您可以对实例执行以下操作:
You can do something like this for an instance:
.path {
stroke-dasharray: 1230;
stroke-dashoffset: 1230;
animation: snail 6s linear forwards;
}
@keyframes snail {
to {
stroke-dashoffset: 0;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1000 200" id="svgBox" style="background-color:#e4e4e4">
<path class="path" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449L10,10" stroke="pink" stroke-width="12" fill="none" id="animateMotion"/>
<circle cx="" cy="" r="5" fill="red">
<animateMotion dur="6s" repeatCount="0">
<mpath xlink:href="#animateMotion"/>
</animateMotion>
</circle>
</svg>
这篇关于像蜗牛一样的路径上的SVG动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文