J'ai dû le faire plusieurs fois récemment, alors j'ai pensé enregistrer la méthode. StackOverflow a une méthode qui fonctionne très 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 a fait un stylo pour le faire rapidement:
Voir le Pen Convertir un polygone SVG en chemin par Michael Schofield (@michaelschofield) sur CodePen.
Vous mettez votre propre Polygon dans le SVG ci-dessus, puis il est remplacé par un chemin dans le DOM. Vous pouvez inspecter DevTools pour extraire les données de chemin.
Le but est, par exemple, que vous essayez d'animer une forme avec des lignes droites à une forme avec des lignes courbes. Les outils logiciels SVG afficheront le premier sous forme de polygone, qui est un type de données différent qui ne peut pas s'animer nativement selon la syntaxe du chemin.