경로를 따라 SVG 애니메이션 움직이기 문제

Question

경로를 따라 모양을 애니메이션화하고 싶습니다. 원하는 경로를 만들었지 만 모양을 따라 움직여 모양을 따라 움직이면 첫 번째 경로의 일부. (용서 날, 멍청한 놈의 비트).

이것은 코드입니다.

<svg> 
    <rect x="-100" y="100" width="200" height="200" style="stroke: none; fill: #FFCC33;"> 
     <animateMotion path="M200,200 
         a-50,-50 0 0,0 0,-30 
         a-50,-50 0 0,1 0,-30" 
         begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/> 
    </rect> 
</svg> 

내가뿐만 아니라 그것으로 바이올린을했다,이 http://jsfiddle.net/fcz69/

Answer 1

정말 같은 질문이 없습니다 더 나은 상황에 넣어 수 있습니다 (그것은 내가 생각해야하는 일), 그렇게하지 정말 해결책. 그러나 나는 일어나고있는 일과 혼란이 어디에 있는지 강조 할 것입니다. 이것은 rotate = "auto"이고 rect의 x, y는 경로를 따라 움직이는 것처럼 결합 된 변환으로 간주되기 때문입니다. x, y를 0,0으로 변경하면 강조 표시됩니다.

좀 더 명확하게하려고 x, y 값이 다른 몇 개의 rect를 결합했습니다. 회전과 결합 된 변환이있을 때와 같은 효과입니다.

녹색이 어떻게 반전되는지를 보게 될 것입니다. 회전이 일어날 때 더 멀리 떨어지게됩니다.

http://jsfiddle.net/fcz69/4/은 일어나는 일을 강조하는 빠른 예입니다.

animationMotion 요소 설명은 여기에서 찾을 수 있습니다. http://www.w3.org/TR/SVG/animate.html#RotateAttribute '회전'비트를 읽을 가치가 있지만 행렬에 익숙하지 않은 경우 머리를들이는 데 시간이 걸릴 수 있습니다.

<svg width="600" height="600"> 
    <path d="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" fill="none" stroke="black"/> 

<rect x="0" y="0" width="200" height="200" 
    style="stroke: none; fill: #FFCC33;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 
<rect x="-100" y="100" width="200" height="200" 
    style="stroke: none; fill: #FF0000;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 
    <rect x="-200" y="200" width="200" height="200" 
    style="stroke: none; fill: #00FF00;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 

</svg> 

Answer 2

훌륭한 질문입니다. AnimateMotion을 처음 사용했을 때, 직사각형이 불가사의하게 뷰에서 사라지고 애니메이션이 끝날 때만 원래 위치로 돌아 왔기 때문에 나는 당혹 스러웠습니다 (다행스럽게도 fill = "freeze"를 사용하지 않았습니다). 문제는 모든 자습서와 예제가 애니메이션 객체에 x = "0"및 y = "0"을 사용하므로 많은 도움이되지 않는다는 것입니다.

실제 상황 : 경로를 따라 오브젝트를 움직이면 x 및 y 위치는 새 좌표 시스템을 나타냅니다. 그것의 원점 (0,0)은 경로를 따라 미끄러지고, 그것의 축 (기본적으로)은 전역 축과 평행하다 - x 축은 수평이고 y 축은 수직이다. rotate = "auto"를 지정하면 축이 회전하여 x 축이 경로의 접선이됩니다. 실제로 애니메이션 객체는 회전 할뿐만 아니라 완전히 다른 경로를 따릅니다.