Nedávno som to musel urobiť niekoľkokrát, takže som si myslel, že túto metódu uložím. StackOverflow má metódu, ktorá funguje skvele:
().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 vytvoril pero, aby to urobil rýchlo:
Prezrite si pero Konverzia polygónu SVG na cestu od Michaela Schofielda (@michaelschofield) na stránkach CodePen.
Do SVG vložíte svoj vlastný polygón a potom ho nahradí cesta v DOM. Môžete skontrolovať nástroje DevTools, aby ste dostali údaje o ceste.
Účelom je napríklad pokúsiť sa animovať z tvaru s priamymi čiarami do tvaru so zakrivenými čiarami. Softvérové nástroje SVG vygenerujú prvý formát ako mnohouholník, čo je iný typ údajov, ktorý sa nemôže natívne animovať podľa syntaxe cesty.