svg 动画路径方向答案

【问题标题】：svg animation path directionsvg 动画路径方向
【发布时间】：2015-04-10 17:06:15
【问题描述】：

我正在使用 svg 动画标签沿路径标签的坐标为组标签设置动画。不幸的是，动画的运行方向与我需要的相反（即从 b 到 a 而不是从 a 到 b）。是否存在任何可以修改这一点的属性，例如：

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

我知道这可以通过 snap 或 raphael 来实现，但据我所知，在这些库中无法使用任何东西来达到 'rotate="auto-reverse"' 的效果。

或者，有没有办法扭转我的路径计算方式？这可以用任何软件实现吗？

【问题讨论】：

标签： svg raphael snap.svg svg-animate

【解决方案1】：

您可以使用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>

【讨论】：