2016-08-19 8 views
1

Here is a codepen i made.KUTE.js의 SVG 경로는 당신이 볼 수 있듯이, 경로가 모핑되지

모핑 없습니다. 나는 이미 문제가 svg 그 자체 내에 있다고 결론을 내 렸습니다. 그들은 변신하고 있지 않습니다. 무엇이 문제 일 수 있습니까? 모양은 매우 단순하며 모두 동일한 크기와 앵커를 가지고 있으며 kute.js documentation에 표시된 것처럼 "닫힌 모양 (해당 d 속성은 z로 끝납니다.)"

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" > 
    <path id="n1" fill="orangered" d="M62,7.5l210,20l30,230l-290-60L62,7.5z"/> 
    <path id="n2" style="visibility:hidden" d="M0,7.5l315,32l-31,189l-280,31L0,7.5"/> 
    </svg> 
+0

나는 코펜에 모핑을 보았습니다. –

답변

0

최신 버전 fixes입니다. 두 폴리곤의 포인트 수가 같을 경우 플러그인에서 케이스를 처리하지 못했습니다.

문제

if (s.length !== e.length){ 
    arL = Math.max(s.length,e.length); 
    if (arL === e.length) { sm = s; lg = e; } else { sm = e; lg = s; } 
    sml = sm.length; 

    smp = S.cP('M'+sm.join('L')+'z'); len = smp.getTotalLength()/arL; 
    for (var i=0; i<arL; i++){ 
     tl = smp.getPointAtLength(len*i); 
     cs = S.gCP(len,tl,sm); 
     nsm.push([ cs[0], cs[1] ]); 
    } 

    if (arL === e.length) { e1 = lg; s1 = nsm; } else { s1 = lg; e1 = nsm; } 
    } else { // here we know the paths have same number of points 
    s1 = s; e1 = e; 
    } 

Codepen demo의 코드.