1

これが私が作ったコードペンです。

ご覧のとおり、パスはモーフィングしていません。問題はsvg自体にあり、モーフィングしていないという結論にすでに飛びつきました。何が問題なのですか？形状は非常に単純で、すべて同じサイズとアンカーを持ち、kute.js のドキュメントにあるように、「閉じた形状 (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>
4

1 に答える 1

0

最新バージョンでは問題が修正されています。プラグインは、2 つのポリゴンが同じ数のポイントを持つ場合を処理しませんでした。

問題のコード

  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;
  }

コードペンのデモ。

于 2016-08-24T11:41:44.877 に答える