SVG-Animation mit GSAP

Question

Ich vermisse etwas einfaches, aber ich kann SVG-Elemente mit GSAP nicht animieren, obwohl die Animationen gut mit HTML funktionieren.

Zum Beispiel, wenn ich zwei Kreise haben - eine mit HTML/CSS erstellt, das andere mit SVG - das HTML-Element animiert wird, während die eine SVG nicht:

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>

^{einbetten auch on JSFiddle}

Answer 1

left ist kein gültiges Attribut für SVG-Elemente. GSAP stellt eine Abstraktion bereit, in der Sie das x-Attribut verwenden, um über Transformationen (sowohl SVG- als auch HTML-Elemente) zu animieren, oder Sie können das Attribut cx von SVG-Kreisen verwenden.

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

Oder ...

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