Velocity.js SVG 文本位置动画
Velocity.js SVG Text Position Animation
我正在尝试让 Velocity.js 为 SVG 文本元素的位置设置动画,如下所示:
Velocity(svg.getElementById('projects-title'), {
x: '50%',
y: '25%'
});
问题在于它更改了样式属性中的这些值,而不是属性本身。因此,不改变元素的位置。结果元素是这样的:
<text x="50%" y="50%" id="projects-title" class="" style="x: 50%; y: 25%;">Projects</text>
如何让 Velocity.js 更改属性而不是元素的 CSS 样式?
试试这个可能会有帮助,您可以使用 TweenMax 库轻松控制任何类型的属性。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax();
tl.set("#projects-title", {
x: '50%',
y: '25%'
});
</script>
我正在尝试让 Velocity.js 为 SVG 文本元素的位置设置动画,如下所示:
Velocity(svg.getElementById('projects-title'), {
x: '50%',
y: '25%'
});
问题在于它更改了样式属性中的这些值,而不是属性本身。因此,不改变元素的位置。结果元素是这样的:
<text x="50%" y="50%" id="projects-title" class="" style="x: 50%; y: 25%;">Projects</text>
如何让 Velocity.js 更改属性而不是元素的 CSS 样式?
试试这个可能会有帮助,您可以使用 TweenMax 库轻松控制任何类型的属性。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
var tl = new TimelineMax();
tl.set("#projects-title", {
x: '50%',
y: '25%'
});
</script>