정사각형을 주어진 경로를 따라 움직이게 하다.
모션 경로가 불규칙하면 top 과 left 의 속성 값을 설정하는 것은 매우 어렵습니다.
이때 SVG 로 실현할 수 있다.
Path 요소의 모양은 해당 d 속성에 의해 정의됩니다.
D 속성의 값은 "명령+매개변수" 의 시퀀스입니다.
여기서 M 20 30 L 160 180 에는 두 개의 명령 시퀀스가 포함되어 있습니다.
M 20 30 은 브러시를 좌표 20 과 30 으로 이동하는 것을 의미합니다.
L 160 180 은 브러쉬의 현재 위치에서 160 및 180 위치까지 선을 그리는 것을 의미합니다.
Path 요소는 다양한 명령을 지원합니다. 여기 있는 곡선 명령을 참조할 수 있습니다.
Html 요소의 CSS 스타일 속성 offset-path 는 오프셋 경로를 나타냅니다.
Offset-path 의 값을 path 요소의 d 속성 값으로 지정하여 지정된 경로를 따라 요소를 이동할 수 있습니다.
여기서 offset-distance 는 초기 위치에서 요소가 오프셋되는 백분율을 지정합니다.
@keyframes 에서 프레임별로 간격띄우기 거리를 변경하여 애니메이션 효과를 얻을 수 있습니다.
Path 의 d 속성을 m10 80c4010,6510,9580s150/kll 로 변경했습니다
그에 따라 큐브의 오프셋 경로 등록 정보를 수정합니다.
경로를 따라 작은 정사각형을 이동하는 효과를 얻을 수 있습니다.
MDN: 경로
MDN: 간격띄우기 경로
MDN: 간격띄우기 거리
SVG 애니메이션 조작 가이드
Svg (scalable vector graphics SVG) 2-9 장: 패스