使用 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
});

使用 GSAP 的 SVG 动画

SVG animation with GSAP

javascript

svg

gsap