이 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> 

없음 자바 스크립트 또는 jQuery를 필요!