juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

animejs morph is broken for more then 1 object #882

Open neonarc4 opened 9 months ago

neonarc4 commented 9 months ago

https://codepen.io/haideraf/pen/ExMRpQJ

plz help all the edge are same what is the issue?

here the original svg

<svg
   version="1.1"
   id="Layer_1"
   x="0px"
   y="0px"
   width="72.514999"
   height="68.333801"
   viewBox="0 0 72.514999 68.333801"
   xml:space="preserve"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
   id="defs2" />

<path
   d="m 71.915003,34.1669 v 33.5669 h -35.657 -35.37899958 c -0.279,-7.67 -0.279,-24.2347 -0.279,-33.5669 V 0.60000013 H 36.258003 c 10.006,0 28.47,0 35.657,0.2624 z" class="shape"
   style="fill:#ff7700;fill-opacity:1;stroke:#000000;stroke-width:1.2;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
   id="path9" />
   <path
   d="m 71.797503,34.166899 c 0,9.1335 -1.943,21.331301 -5.087,28.489701 -7.342,3.0753 -20.533,4.9901 -30.468,4.9901 -9.735,0 -20.634,-1.8423 -30.1599996,-4.8305 -3.392,-6.8667 -5.39499998,-19.341301 -5.39499998,-28.649301 0,-9.0463 1.89599998,-21.2881 4.99399998,-28.3881999 7.2489996,-3.1333 20.5319996,-5.09159997 30.5759996,-5.09159997 9.982,0 23.73,1.92929997 30.545,5.17929997 3.114,7.5083999 5.025,19.2105999 5.025,28.2859999 z"
   style="fill:#ff5a1f;fill-opacity:1;stroke:#000000;stroke-width:1.2;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
   id="path10" /><path
   d="m 71.915003,34.1669 v 33.5669 h -35.657 -35.37899958 c -0.279,-7.67 -0.279,-24.2347 -0.279,-33.5669 V 0.60000013 H 36.258003 c 10.006,0 28.47,0 35.657,0.2624 z"
   style="fill:#ff3e3e;fill-opacity:1;stroke:#000000;stroke-width:1.2;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
   id="path11" />
 </svg>
juliangarnier commented 9 months ago

This is a limitation of the current version of anime.js, but it's fixed in V4! (currently in early access only).