Recientemente tuve que hacer esto varias veces, así que pensé en guardar el método. StackOverflow tiene un método que funciona muy bien:
().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 hizo un bolígrafo para hacerlo rápido:
Consulte Pen Convertir polígono SVG en ruta de Michael Schofield (@michaelschofield) en CodePen.
Pones tu propio Polígono en el SVG de arriba y luego se reemplaza por una ruta en el DOM. Puede DevTools inspeccionar para obtener los datos de la ruta.
El propósito es, por ejemplo, intentar animar desde una forma con líneas rectas a una forma con líneas curvas. Las herramientas de software SVG generarán el primero como un polígono, que es un tipo diferente de datos que no puede animarse de forma nativa con la sintaxis de la ruta.