Nemrég ezt már néhányszor meg kellett tennem, ezért gondoltam, hogy mentem a módszert. A StackOverflow nagyszerű módszerrel rendelkezik:
().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 tollat készített, hogy gyorsan megtehesse:
Lásd Michael Schofield (@michaelschofield) Pen Code SVG Polygon to Path átalakítása a CodePen-en.
A saját sokszögét beteszi a fenti SVG-be, majd helyébe egy útvonal lép a DOM-ban. A DevTools ellenőrizheti az útvonaladatok megszerzését.
A cél például az, hogy egyenes vonalakból görbe vonalakkal próbáljon animálni. Az SVG szoftvereszközök az előbbit sokszögként fogják kiadni, ez egy más típusú adat, amely nem képes natívan animálni az útvonal szintaxisát.