강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

turtle_ekk님의 프로필 이미지
turtle_ekk

작성한 질문수

SVG 마스터

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

path 를 x ,y로 이동

작성

·

277

0

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

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

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

turtle_ekk님의 프로필 이미지
turtle_ekk

작성한 질문수

질문하기