스냅을 사용하여 기존 경로의 점을 수정할 수 있습니까?

Question

난 경로 요소와 SVG 가지고

<path d="M54.7,0.8 L111.8,73.4 L79.9,126.1 L27.9,128.7 L0.5,74.2 L54.7,0.8 Z" id="Shape"></path> 

은 이해를 SVG path's meaning :

• M은
• 은 ls는
• Z 생산 경로를 폐쇄 선을 그릴 지점으로 이동 다각형

그리고 SnapSVG를 조작 할 수 있다는 것을 알고 있습니다. 개체 :

var graph = Snap(".graph"); 
var item = graph.select('#after #Shape'); 

그러나 경로를 수정하는 방법은 the Snap docs에서 찾을 수 없습니다. 항목의 paper.path을 살펴 봤지만 경로 변경의 예는 볼 수없고 새로운 경로 만 볼 수 있습니다.

어떻게 SnapSVG에서 기존 경로를 수정할 수 있습니까? 이상적으로, 나는 경로의 변화, 즉 오래된 폴리곤에서 새로운 폴리곤으로가는 애니메이션을 만들고 싶습니다.

Answer 1

당신은 애니메이션을 할 수있는 d 다른 SnapSVG 항목 등 (path descriptions) :

var graph = Snap(".graph"); 
var item = graph.select('#after #Shape'); 

가져 오기 기존 점 :

item.attr('d') 

다음

을 애니메이션 :

이

item.animate({ 
    d: "M81.8,0.1 L146.8,85.1 L124.1,164.4 L39.7,164.4 L0.6,79.7 L81.8,0.1 Z" 
}, 1500, mina.easeout)