GSAP的SVG動畫

Question

我可能會錯過一些簡單的東西，但儘管動畫與HTML協作良好，但我無法使用GSAP爲SVG元素製作動畫。

舉例來說，如果我有兩個圓 - 一個用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 
});