Question

我可能会遗漏一些简单的东西，但我无法使用GSAP为SVG元素制作动画，尽管动画可以很好地与HTML配合使用。

例如，如果我有两个圆圈 - 一个用HTML / CSS创建，另一个用SVG创建 - HTML元素获得动画，而SVG则没有：

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; ^{也嵌入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动画

1 个答案: