从lineto到三次贝塞尔曲线的SVG路径动画命令 [英] SVG path animation from lineto to cubic-bezier curve command
问题描述
我正在为svg < path>
元素设置动画.最初的< path>
元素具有 L(lineto)
命令,而我尝试对其进行动画处理的< path>
具有 C(三次贝塞尔曲线)
命令.我曾尝试对其进行动画处理,但实际上并没有在两条路径之间过渡.这样可能吗?
I am trying to animate an svg <path>
element. The initial <path>
element has L(lineto)
commands whereas the <path>
that I'm trying to animate it to has C(cubic-bezier curve)
commands. I've tried animating it but it doesn't really transition between the two paths. Is something like this possible?
<svg>
<path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
<animate xlink:href="#path"
attributeName="d"
dur="3s"
from="M 0 50 L 25 40 L 50 60 L 75 40 L 100 60 L 125 40 L 150 50"
to="M 0 80 C 25 55 50 55 75 80 C 100 105 125 105 150 80"
repeatCount="indefinite" />
</svg>
推荐答案
如您所知,路径数据动画需要列出完全相同的命令序列和工作点.就是说,您可以根据需要将路径划分为多个段,如果三次贝塞尔曲线的控制点位于一条直线上,则它可以描述一条直线.为了使您的示例正常工作,您需要
As you found out, path data animations need to list the exact same sequence of commands and points to work. That said, you can divide a path into as many segments as you need, and a cubic bezier can describe a straight line if its control points are positioned in a straight line. For your example to work, you need to
- 将每个
L
段重写为一个C
段 - 将每个
C
段划分为三个C
段,以使曲线保持不变
- rewrite each
L
segment as aC
segment - divide each
C
segment into threeC
segments so that the curve is unchanged
最好使用诸如Inkscape这样具有适当工具的通用编辑器来完成这两项任务.
Both tasks are best performed with a grafical editor like Inkscape that has appropriate tools.
<svg>
<path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
<animate xlink:href="#path"
attributeName="d"
dur="3s"
from="M 0,50
C 12.5,45 12.5,45 25,40
37.5,50 37.5,50 50,60
62.5,50 62.5,50 75,40
87.5,50 87.5,50 100,60
112.5,50 112.5,50 125,40
137.5,45 137.5,45 150,50"
to="M 0,80
C 8.33333,71.6667 16.6667,66.1111 25,63.3333
33.3333,60.5556 41.6667,60.5556 50,63.3333
58.3333,66.1111 66.6667,71.6667 75,80
83.3333,88.3333 91.6667,93.8889 100,96.6667
108.333,99.4444 116.667,99.4444 125,96.6667
133.333,93.8889 141.667,88.3333 150,80"
repeatCount="indefinite" />
</svg>
这篇关于从lineto到三次贝塞尔曲线的SVG路径动画命令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!