我可能会错过一些简单的东西,但我无法使用 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>
最佳答案
left
不是 SVG 元素的有效属性。 GSAP 提供了一种抽象,您可以在其中使用 x
属性通过变换(SVG 和 HTML 元素)进行动画处理,或者您可以使用 SVG 圆圈的 cx
属性。
TweenLite.to(circle, 1, {
x: 100
});
或者...
TweenLite.to(circle, 1, {
cx: 100
});
关于javascript - 使用 GSAP 的 SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37867798/