SVG 경로 데이터 애니메이트

Question

jQuery를 사용하여 SVG의 경로 데이터 속성에 애니메이션을 적용하려고합니다.

현재 SVG를 생성하고 애니메이션 요소를 추가하는 버튼과 함께 두 개의 경로를 저장했습니다.

애니메이트가 두 번째 svg에서 아무 것도 변경하지 않지만 직접 속성 (첫 번째 svg로 표시)을 변경할 때 성공했습니다.

$('.svg2 svg path').append('<animate attributeName="stroke-dasharray" from="'+OrigPath+'" to="'+NewPath+' dur="4" repeatCount="1">'); 

도움이 될 것입니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/vB8tu/1/

Answer 1

요소를 추가하는 것과 같은 jQuery를 사용하면 작동하지 않습니다. jQuery가 SVG보다 새로운 요소에 HTML 네임 스페이스를 사용하기 때문입니다.

새 요소를 만들고 추가하려면 jQuerySVG와 같은 것을 사용해야합니다.