Velocity.js SVG 文本位置动画答案

【问题标题】：Velocity.js SVG Text Position AnimationVelocity.js SVG 文本位置动画
【发布时间】：2016-09-12 08:39:12
【问题描述】：

我正在尝试让 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 样式？

【问题讨论】：

标签： javascript svg attributes velocity.js

【解决方案1】：

试试这可能会有所帮助，您可以使用 TweenMax lib 轻松控制任何类型的属性。

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

【讨论】：