JavaScript를 사용하여 SVG 경로에 어떻게 애니메이션을 적용합니까?

Question

거기에 다음 svg 경로의 "d"속성을 적용 할 수있는 방법이 있습니까?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path id="theEl" d="M0 0, L 0 500, L 600 500, L 600 0" stroke="black" stroke-width="10"/> 
</svg> 

내가 그것을 변경하려면

나는이 충분히 될 것이라고 알고

document.getElementById('theEl').setAttribute('d', 'M0 0, L 0 200, L 200 200, L 600 0'); 

그러나 우리는이 애니메이션을 적용 할 경우/변신 무엇? 클릭 할 때이 두 경로 사이를 전환하는 버튼이 있다고 가정 해보십시오.

나는 이것에 대한 몇 가지 답변을 보았고 SVG 애니메이션 요소를 만든 다음 svg DOM 요소에 추가 할 것을 제안했습니다. 그러나 이것은 버튼을 클릭 할 때마다 해당 애니메이션 요소를 추가/제거해야 할 필요가 있음을 의미합니다. 더 간단한 방법이 있습니까? 어떤 svg libs를 사용하지 않고? 감사합니다.

Answer 1

정적으로 SMIL 애니메이션을 경로의 하위 태그로 마크 업하고 버튼을 클릭하면 실행되도록하십시오.

<animate begin="click" ... 

Answer 2

애니메이션 요소를 직접 svg에 추가 할 수 있으므로 스크립팅 할 필요가 없습니다.

깔끔한 예와 자세한 내용은 Tavmjong Bah의 this blogpost을 참조하십시오.