• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

path 를 x ,y로 이동

22.02.19 18:12 작성 조회수 157

0

강의 예시처럼 rect로는 해보았는데 path로 된 svg를 x ,y축으로 이동시키고 싶다면 animate 태그로는 할 수 없는건가요?

course-thumbnail

SVG 마스터

CSS 애니메이션의 alternate를 SMIL로 구현하기

강의실 바로가기

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2022.02.23

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

이 글과 비슷한 Q&A