Tive de fazer isso algumas vezes recentemente, então pensei em salvar o método. StackOverflow tem um método que funciona muito bem:
().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 fez uma caneta para fazer isso rápido:
Veja o Pen Convert SVG Polygon to Path de Michael Schofield (@michaelschofield) em CodePen.
Você coloca seu próprio polígono no SVG acima e então ele é substituído por um caminho no DOM. Você pode inspecionar DevTools para obter os dados do caminho.
O objetivo é, por exemplo, você está tentando animar de uma forma com linhas retas para uma forma com linhas curvas. As ferramentas de software SVG produzirão o primeiro como um polígono, que é um tipo diferente de dados que não pode ser animado nativamente com a sintaxe do caminho.