Ho dovuto farlo alcune volte di recente, quindi ho pensato di salvare il metodo. StackOverflow ha un metodo che funziona alla grande:
().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 ha creato una penna per farlo velocemente:
Vedi Pen Convert SVG Polygon to Path di Michael Schofield (@michaelschofield) su CodePen.
Metti il tuo Poligono nell'SVG sopra e poi viene sostituito da un percorso nel DOM. Puoi controllare DevTools per ottenere i dati del percorso.
Lo scopo è, ad esempio, provare ad animare da una forma con linee rette a una forma con linee curve. Gli strumenti software SVG produrranno il primo come poligono, che è un diverso tipo di dati che non può essere animato in modo nativo secondo la sintassi del percorso.