KUTE.js SVG路径不变形

问题描述：

Here is a codepen i made.KUTE.js 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>

我在码盘上看到变形。 –

答

最新版本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的代码。

KUTE.js SVG路径不变形

相关推荐