Fatal编程技术网
  • javascript/
  • Javascript 如何在运动路径上高效地反转SVG（SMIL）动画？

Javascript 如何在运动路径上高效地反转SVG（SMIL）动画？

javascript animation svg

Javascript 如何在运动路径上高效地反转SVG（SMIL）动画？,javascript,animation,svg,reverse,smil,Javascript,Animation,Svg,Reverse,Smil,我试图确定如何有效地反转这个SVG动画（使用SMIL），它使用animateMotion和path元素上的d属性。我需要动画围绕形状逆时针运行 可以找到当前动画，相关代码如下所示 document.getElementById（“svgobject”）.pauseAnimations（） 开始 停止 您可以使用关键点和关键时刻属性反转动画方向 <animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="a

我试图确定如何有效地反转这个SVG动画（使用SMIL），它使用
animateMotion
和
path
元素上的
d
属性。我需要动画围绕形状逆时针运行

可以找到当前动画，相关代码如下所示

document.getElementById（“svgobject”）.pauseAnimations（）


开始
停止

您可以使用
关键点
和
关键时刻
属性反转动画方向


<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1">




如果calcMode是“带节奏的”（默认设置），则keyTimes似乎被破坏。如果您将其更改为其他内容，如“线性：动画在Chrome中也能正常工作”


<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">





最好的答案。非常感谢。