2016-09-11 5 views
0

私はVelocity.jsはこのようなSVGのテキスト要素の位置をアニメーション化するために取得しようとしています: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> 

要素のCSSスタイリングではなく、Velocity.jsで属性を変更するにはどうすればよいですか?

答えて

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>