SVG - 경로를 따라 직사각형을 애니메이션화합니다.

직사각형에 애니메이션을 적용하여 animateMotion을 사용하여 지금까지 작동 한 주어진 경로를 따르고 싶었습니다. 이것은 내가 가지고 무엇을 :SVG - 경로를 따라 직사각형을 애니메이션화합니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<g> 
    <rect height="40" width="40" style="fill:#777; stroke:none;"/> 
    <animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/> 
</g> 
<path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/>

이제

내 질문 : 나는 사각형이 항상 경로에있는 사각형 (20 20)의 중심 경로 (이미 달성)을 따라 얻는 방법 ? SVG가 제공하는 수단으로이를 달성 할 수 있습니까?

출처

2012-11-08 PattaFeuFeu

확실히, rect에 변형을 추가하십시오.

html, body, svg { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<svg> 
 
    <g> 
 
     <rect transform="translate(-20,-20)" height="40" width="40" style="fill:#777; stroke:none;"/> 
 
     <animateMotion fill="freeze" path="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" dur="3.14159s" repeatCount="indefinite"/> 
 
    </g> 
 
    <path d="M 0 0 Q 190 160 150 70 T 200 150 T 300 200 T 200 200" style="fill:none;stroke:#F00;stroke-width:5"/> 
 
</svg>

다음은 사각형 센터 0,0에서 RECT 원점을 이동하는 행위를 번역합니다.

출처

2012-11-08 08:19:12

실용적인 솔루션에 대한 링크를 추가하기 만하면 답이 얼마나 좋을까요? –

감사합니다. 하지만 왜? 나는'translate '부분이 일반적으로하는 일을 알고 있지만, 왜이 경우에 효과가 있고 왜 내가 의도 한 일을하는지 이해하지 못한다. – PattaFeuFeu

@ RobertLongson 어떻게 그렇게? 회신을 보내면 피델 링크를 추가하지 말라는 제안을 받았음을 나타냅니다. 그럴 경우 이상하게 들리네 ... –

SVG - 경로를 따라 직사각형을 애니메이션화합니다.

답변

관련 문제