Ich musste dies in letzter Zeit einige Male tun, also dachte ich, ich würde die Methode speichern. StackOverflow hat eine Methode, die hervorragend funktioniert:
().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 hat einen Stift gemacht, um es schnell zu machen:
Weitere Informationen finden Sie im Stift Konvertieren des SVG-Polygons in einen Pfad von Michael Schofield (@michaelschofield) auf CodePen.
Sie fügen Ihr eigenes Polygon in das SVG oben ein und es wird dann durch einen Pfad im DOM ersetzt. Sie können DevTools überprüfen, um die Pfaddaten abzurufen.
Der Zweck besteht beispielsweise darin, von einer Form mit geraden Linien zu einer Form mit gekrümmten Linien zu animieren. SVG-Softwaretools geben das erstere als Polygon aus. Hierbei handelt es sich um einen anderen Datentyp, der nicht nativ mit der Pfadsyntax animiert werden kann.