Jeg har måttet gjøre dette et par ganger nylig, så jeg trodde jeg skulle lagre metoden. StackOverflow har en metode som fungerer bra:
().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 laget en penn for å gjøre det raskt:
Se Pen Convert Black SVG Polygon to Path av Michael Schofield (@michaelschofield) på CodePen.
Du setter din egen polygon i SVG ovenfor, og deretter blir den erstattet av en sti i DOM. Du kan DevTools inspisere for å få ut banedataene.
Hensikten er for eksempel at du prøver å animere fra en form med rette linjer til en form med buede linjer. SVG-programvareverktøy vil sende førstnevnte ut som en polygon, som er en annen type data som ikke kan animeres naturlig til stisyntaks.