A trebuit să fac asta de câteva ori recent, așa că m-am gândit că voi salva metoda. StackOverflow are o metodă care funcționează excelent:
().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 făcut un stilou pentru ao face rapid:
Vezi Pen Convertiți poligonul SVG în cale de Michael Schofield (@michaelschofield) pe CodePen.
Vă puneți propriul Poligon în SVG de mai sus și apoi acesta este înlocuit de o cale din DOM. Puteți inspecta DevTools pentru a obține datele despre cale.
Scopul este, de exemplu, să încercați să animați de la o formă cu linii drepte la o formă cu linii curbe. Instrumentele software SVG vor genera primul ca un poligon, care este un tip diferit de date care nu poate anima în mod nativ la sintaxa căii.