GSAP를 사용하는 SVG 애니메이션

Question

단순한 것이 누락되었지만 HTML로 잘 작동하는 애니메이션에도 불구하고 SVAP 요소를 GSAP로 애니메이션 할 수 없습니다. 예를 들어

, 나는 두 개의 원이있는 경우 - HTML/CSS로 만든 하나, SVG와 다른 - HTML 요소는 애니메이션 도착을 SVG 하나하지 않는 동안 : 또한

var circle = document.getElementById("html"); // Does work 
 
var circle = document.getElementById("svg"); // Does not work 
 
TweenLite.to(circle, 1, { 
 
    left: "100px" 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script> 
 

 
<div id="html" style="height: 20px;width: 20px;border-radius: 50%;background: tomato;position: absolute"></div> 
 
<svg width="100" height="100"> 
 
    <circle id="svg" cx="10" cy="50" r="10" fill="tomato" /> 
 
</svg>

^{삽입을 on JSFiddle}

Answer 1

left은 SVG 요소에 유효한 속성이 아닙니다. GSAP는 x 속성을 사용하여 변환 (SVG 및 HTML 요소 모두)을 통해 애니메이션을 적용하거나 SVG 서클의 cx 속성을 사용할 수있는 추상화를 제공합니다.

TweenLite.to(circle, 1, { 
    x: 100 
}); 

또는 ...

TweenLite.to(circle, 1, { 
    cx: 100 
});