Nedávno jsem to musel udělat několikrát, tak jsem si myslel, že tu metodu uložím. StackOverflow má metodu, která funguje skvěle:
().forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly)( var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,'path'); var points = poly.getAttribute('points').split(/\s+|,/); var x0=points.shift(), y0=points.shift(); var pathdata = 'M'+x0+','+y0+'L'+points.join(' '); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('id',poly.getAttribute('id')); path.setAttribute('fill',poly.getAttribute('fill')); path.setAttribute('stroke',poly.getAttribute('stroke')); path.setAttribute('d',pathdata); poly.parentNode.replaceChild(path,poly); )Michael Schofield vyrobil pero, aby to udělal rychle:
Podívejte se na pero Převod SVG polygonů na cestu od Michaela Schofielda (@michaelschofield) na CodePen.
Do výše uvedeného SVG vložíte svůj vlastní Polygon a poté bude nahrazen cestou v DOM. Můžete DevTools zkontrolovat, abyste dostali data cesty.
Účelem je například pokus o animaci z tvaru s přímými čarami do tvaru se zakřivenými čarami. Softwarové nástroje SVG budou první generovat jako polygon, což je jiný typ dat, který nelze nativně animovat podle syntaxe cesty.