无法弄清楚这个 svg 动画

Question

我一直试图让舞台中的圆圈围绕椭圆移动，我什至从具有非常相似设置但没有骰子的人那里复制了代码。下面是代码笔和标记。

http://codepen.io/alcoven/pen/XJXMNW

<div id="wrapper">
  <div class="container">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
    <!--<g>
        <circle fill="#F26451" cx="17.6" cy="3.3" r="1.4"/>
    </g>
    <g>
        <circle fill="#F26451" cx="6.4" cy="23.1" r="1.4"/>
    </g>-->
    <line class="line" stroke-width="1.3" stroke-miterlimit="10" x1="3.7" y1="26.1" x2="26.2" y2="3.6"/>
    <path class="vertical" d="M9.9,14.9a5,14 0 1,0 10,0a5,14 0 1,0 -10,0"/>
    <ellipse class="_x34_5deg" transform="matrix(0.5037 0.8639 -0.8639 0.5037 20.2917 -5.4991)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
    <ellipse class="_x2D_45deg" transform="matrix(-0.5037 0.8639 -0.8639 -0.5037 35.3327 9.5202)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
    <path class="circlet" d="M16.4,3.2a1.3,1.3 0 1,0 2.6,0a1.3,1.3 0 1,0 -2.6,0"/>
    <path class="circleb" d="M5,23.2a1.4,1.4 0 1,0 2.8,0a1.4,1.4 0 1,0 -2.8,0"/>
    </svg>
  </div>
</div>

CSS

#wrapper {
  top:0;
  left:0;
  position:absolute;
  width:100%;
  height:100%;
  background:#F26451;
}

.container {
  width:100%;
  position:fixed;
  top:30%;
  bottom:70%;
}

svg {
  width:100px;
  height:auto;
  margin:10% auto;
  display:block;
}

line, .vertical, ellipse._x34_5deg, ellipse._x2D_45deg {
  stroke:#fff;
  fill:none;
  stroke-width:1.3;
  stroke-miterlimit:10;
}

.circlet, .circleb {
  stroke:#fff;
  fill:#F26451;
  stroke-width:1.3;
  stroke-miterlimit:10;
}

.line {
  display:none;
}

JS

(function($){
  $('[class^="circle-"]').animate({opacity:1},500);
// get the animation path node
var $path = $('.vertical'), path = $path[0];
var $path2 = $('.vertical'), path2 = $path2[0];
// get the animation object node
var $obj = $('.circlet');
var $obj2 = $('.cirlceb');

// get path's length
var pathLength = path.getTotalLength();
var pathLength2 = path2.getTotalLength();

// create new tween by initializing TWEEN.Tween object from 0 
var tween = new TWEEN.Tween({ length: 0  })
    // to path length
    // in 2000 milliseconds
    .to({ length: pathLength }, 1500)
    // on update callback fires on every tick
    .onUpdate(function(){
      var point = path.getPointAtLength(this.length);
      $obj.css({
        'transform': 'translate('+ point.x + 'px,'+ point.y +'px)'
      });
    }).repeat(999999999).start();

var tween2 = new TWEEN.Tween({ length: 0  })
// to path length
// in 2000 milliseconds
.to({ length: pathLength2 }, 1500)
// on update callback fires on every tick
.onUpdate(function(){
  var point2 = path2.getPointAtLength(this.length);
  $obj2.css({
    'transform': 'translate('+ point2.x + 'px,'+ point2.y +'px)'
  });
}).repeat(999999999).start();

// animate loop
animate = function(){
  requestAnimationFrame(animate)
  TWEEN.update()
}

//start the animation loop
animate()
  }(jQuery));

不太明白为什么这不起作用，不确定是我的 js 还是我的 svg 的设置方式，请帮忙：]

这是我复制的js http://codepen.io/joshy/pen/cojbD

Answer 1

定义动画路径，可以是圆形、椭圆或贝塞尔曲线。

将animateMotion标签之间的路径定义括起来，每个移动对象定义中的一对，如下：

   <?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" >

<!-- Draw the outline of the motion path in grey, along
     with 2 small circles at key points -->
<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"/>
<circle cx="10" cy="110" r="3" fill="lightgrey"  />
<circle cx="110" cy="10" r="3" fill="lightgrey"  />

<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
       <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
</circle>

无需 javascript 或 jQuery！