[英]How to change the start position of svg image using animateMotion?
I am trying to change the start position of an svg image to animate it along a path using animateMotion
我正在尝试更改 svg 图像的起始位置以使用
animateMotion
沿路径对其进行动画处理
You can check the current result here https://jsfiddle.net/7espvwuz/您可以在此处查看当前结果https://jsfiddle.net/7espvwuz/
In this fiddle I am using a circle to mock my image.在这个小提琴中,我使用一个圆圈来模拟我的形象。
The problem is问题是
cx = 0
and cy = 0
, the animation starts at a wrong positioncx = 0
和cy = 0
,动画从错误的位置开始cx = 0
and cy = 100
, the circle is perfectly positioned but the animation is shifted by a value of 100
in the y
axis.cx = 0
和cy = 100
,则圆的位置完美,但动画在y
轴上移动了100
的值。 What am I doing wrong?我究竟做错了什么?
You can give the circle the desired cx and cy ( cx="6.25" cy="100"
) and set
those attributes to o when the animation begins.您可以为圆指定所需的 cx 和 cy (
cx="6.25" cy="100"
) 并在动画开始时set
这些属性设置为 o。
Please read about the set element .请阅读set 元素。
var currentIndex = 0; const pathArray = [ "M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25", "M25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25", "M36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5", "M68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75", "M88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4"]; function buttonClick() { set1.setAttribute("cx",6.25); set1.beginElement(); set2.setAttribute("cy",100); set2.beginElement(); motion1.setAttribute("path", pathArray[currentIndex]); motion1.beginElement(); currentIndex++; }
<button onclick="buttonClick()">Click me</button> <svg preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 450 120" style="background-color: #0010ff3b;"> <path d="M6.25 100 L6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4" stroke='black' strokeDasharray="5, 5" fill='transparent'></path> <circle id="circle" r="5" cx="6.25" cy="100" stroke="black" stroke-width="3" fill="red" > <set id="set1" begin="indefinite" attributeName="cy" to="0"></set> <set id="set2" begin="indefinite" attributeName="cx" to="0"></set> <animateMotion id="motion1" begin="indefinite" dur="1s" fill="freeze" path="M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25"> </animateMotion> </circle> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.