Inflearn Community Q&A
asked
path 를 x ,y로 이동
Written on
·
283
0
강의 예시처럼 rect로는 해보았는데 path로 된 svg를 x ,y축으로 이동시키고 싶다면 animate 태그로는 할 수 없는건가요?
svgHTML/CSS
Answer 1
0
studiomeal
Instructor
<path>를 이동시킬 경우는 아래처럼 <animate> 대신 <animateTransform> 태그를 이용해서 변환(위치 이동, 회전 등)을 처리할 수는 있는데요, 수업에서 말씀드렸다시피 SMIL 자체가 추천되는 기술은 아니기 때문에, CSS transition이나 CSS animation을 사용하시는게 좋습니다. 위치 이동은 CSS로도 충분히 가능하니까요~
<animateTransform attributeName="transform" type="translate" from="0 0" to="700 0" dur="2s" repeatCount="indefinite"></animateTransform>