简体   繁体   中英

KUTE.js svg paths not morphing

Here is a codepen i made.

As you can see, the paths are not morphing. I've already jumped to the conclusion the problem is within the svg itself, they are not morphing. What could it be the problem? The shapes are quite simple, all have the same size and anchors and, as it says on kute.js documentation , "closed shapes (their d attribute ends with 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>

The latest version fixes the problem. The plugin didn't handle the case when the two polygons have same number of points.

The code in issue

  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 .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM