Olen pidanud seda hiljuti paar korda tegema, nii et mõtlesin, et salvestan meetodi. StackOverflow'l on meetod, mis töötab suurepäraselt:
().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 tegi pliiatsi, et seda kiiresti teha:
Vaadake CodePenil Michael Schofieldi (@michaelschofield) pliiatsi teisendamise SVG polügooni teeks.
Lisate enda Polygoni ülaltoodud SVG-sse ja siis asendatakse see DOM-i rajaga. Teeandmete välja saamiseks võite DevToolsi kontrollida.
Eesmärk on näiteks see, et proovite animeerida sirgjoonelisest kujust kumerate joontega kujundist. SVG tarkvaratööriistad väljastavad esimese polügoonina, mis on teist tüüpi teave, mida ei saa tee süntaksiga päriselt animeerida.