Jeg har måttet gøre dette et par gange for nylig, så jeg troede, jeg ville gemme metoden. StackOverflow har en metode, der fungerer godt:
().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 lavede en pen til at gøre det hurtigt:
Se pennen Konverter SVG-polygon til sti af Michael Schofield (@michaelschofield) på CodePen.
Du lægger din egen polygon i SVG ovenfor, og derefter bliver den erstattet af en sti i DOM. Du kan DevTools inspicere for at få ud af stigdataene.
Formålet er for eksempel, at du prøver at animere fra en form med lige linjer til en form med buede linjer. SVG-softwareværktøjer udsender førstnævnte som en polygon, som er en anden type data, der ikke kan animeres indbygget til stisyntaxen.