svg动画路径方向

我正在使用svg动画标签沿着路径标记的坐标为组标签设置动画。不幸的是，动画的运行方向与我所需要的方向相反（I.E从b到a而不是从a到b）。是否存在这将修订本的任何属性，类似于：svg动画路径方向

<animateMotion 
       xlink:href="#group1" 
       dur="6s" 
       fill="freeze" 
       rotate="auto-reverse" 
       direction="reverse" 
    > 
    <mpath xlink:href="#path1" /> 
    </animateMotion>

我知道这可能是与卡扣或拉斐尔来实现，但是据我知道这是不可能使用什么效果“旋转=在这些库中的“自动反向”。

另外，有没有办法改变我的路径计算方式;这可以通过任何软件来实现吗？

来源

2015-02-10 Hello World

您可以使用keyPoints属性以及keyTimes。

<?xml version="1.0"?> 
 
<svg width="120" height="120" viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg" version="1.1" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" > 
 

 
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" 
 
      stroke="lightgrey" stroke-width="2" 
 
      fill="none" id="theMotionPath"/> 
 
    <!-- Here is a green circle which will be moved along the motion path. --> 
 
    <circle cx="" cy="" r="5" fill="green"> 
 
     <!-- Define the motion path animation --> 
 
     <animateMotion dur="6s" repeatCount="indefinite" keyPoints="0;1" calcMode="linear" 
 
        keyTimes="0;1"> 
 
      <mpath xlink:href="#theMotionPath"/> 
 
     </animateMotion> 
 
    </circle> 
 
    <!-- Here is a red one, using the same motionPath but reversed thanks to keyPoints --> 
 
    <circle cx="" cy="" r="5" fill="red"> 
 
     <animateMotion dur="6s" repeatCount="indefinite" keyPoints="1;0" calcMode="linear" 
 
        keyTimes="0;1"> 
 
      <mpath xlink:href="#theMotionPath"/> 
 
     </animateMotion> 
 
    </circle> 
 

 
</svg>

来源

2015-02-10 16:53:28 Kaiido

svg动画路径方向

回答

相关问题