왜 절대 경로를 사용하는 svg animatemotion을 얻을 수 없습니까?

Question

SVG Path documentation은 대문자 (M, L) 문자를 사용한다는 것은 절대 좌표임을 의미합니다. 따라서이 경로에서 절대 좌표 100,100으로 이동합니다.

<rect x="200" y="0" width="30" height="15" style="stroke: #ff0000;"> 
      <animateMotion path="M0,0 L100,100" begin="0s" dur="1s" repeatCount="indefinite" /> 
    </rect> 

그러나 현실에서는 그렇지 않습니다. Here is a simple fiddle 직사각형에 애니메이션을 적용합니다. 출발점은 200,0에 있습니다. 100,100으로 이동하면 아래로 이동해야합니다. 그렇지 않습니다. 오른쪽으로 이동합니다. 무슨 일이야?

(내 목표는 사용자 입력에 따라 연속 애니메이션을 버리지 않고 동적으로 좌표를 제거하므로 절대 좌표를 사용해야합니다.)

Answer 1

The effect of a motion path animation is to add a supplemental transformation matrix onto the CTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the computed X and Y values computed over time.

그래서 당신은 객체가 사용자가 정의해야 당신이 당신의 시스템의 원점 (0, 0)로 설정하는 좌표 싶다면 0,0 x="200"

Answer 2

보다는 x="0" 설정에서 가고 싶은 경우 rect 요소 t o는 (0,0) 또는 x="0" y="0"입니다. 그런 다음 animateMotion에 path="M200,0 L100,100"을 정의하면 원하는 효과를 얻을 수 있습니다.

이것은 SVG 변환의 좌표계가 기본적으로 변형 요소 주위에 집중되어 있기 때문에 좌표 (0,0)는 요소가 정의 된 위치에있게됩니다. 이에 대한 자세한 내용은 좌표계 변환 섹션 (http://sarasoueidan.com/blog/svg-transformations/)을 참조하십시오.