Velocity.js SVG 텍스트 위치 애니메이션

Question

내가 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 스타일의 속성을 변경 할 수 있습니까?

Answer 1

시도해보십시오. 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>