Velocity.js SVG文本位置动画

时间:2016-09-11 20:31:27

标签: javascript svg attributes velocity.js

我试图让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样式?

1 个答案:

答案 0 :(得分:0)

尝试这可能会有所帮助,您可以使用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>