Ik heb dit onlangs een paar keer moeten doen, dus ik dacht dat ik de methode zou opslaan. StackOverflow heeft een methode die geweldig werkt:
().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 heeft een pen gemaakt om het snel te doen:
Zie de Pen Convert SVG Polygon to Path door Michael Schofield (@michaelschofield) op CodePen.
U plaatst uw eigen polygoon in de bovenstaande SVG en wordt vervolgens vervangen door een pad in de DOM. U kunt DevTools inspecteren om de padgegevens op te halen.
Het doel is bijvoorbeeld dat je probeert te animeren van een vorm met rechte lijnen naar een vorm met gebogen lijnen. SVG-softwaretools zullen de eerste uitvoeren als een polygoon, wat een ander type gegevens is dat niet native kan animeren op de padsyntaxis.