javascriptsvgpathmorphing

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>

Solution

  • 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.