javascript - 使用 GSAP 的 SVG 动画

Question

我可能会错过一些简单的东西，但我无法使用 GSAP 对 SVG 元素进行动画处理，尽管动画与 HTML 配合得很好。

例如，如果我有两个圆圈 - 一个是用 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>

^{也嵌入 JSFiddle}

Answer 1

left 不是 SVG 元素的有效属性。 GSAP 提供了一种抽象，您可以在其中使用 x 属性通过变换(SVG 和 HTML 元素)进行动画处理，或者您可以使用 SVG 圆圈的 cx 属性。

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

或者...

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