Olen joutunut tekemään tämän muutaman kerran viime aikoina, joten ajattelin tallentaa menetelmän. StackOverflowlla on menetelmä, joka toimii hyvin:
().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 teki kynän tekemään se nopeasti:
Katso Michael Schofieldin (@michaelschofield) kynä Muunna SVG-polygoni poluksi CodePen -palvelussa.
Asetat oman monikulmion yllä olevaan SVG: hen ja sitten se korvataan polulla DOM: ssa. Voit tarkistaa DevTools-sovelluksen saadaksesi polkutiedot.
Tarkoituksena on esimerkiksi yrittää animoida suorista viivoista muotoon kaarevia viivoja. SVG-ohjelmistotyökalut tuottavat edellisen monikulmiona, joka on erityyppinen data, jota ei voida animoida polun syntaksissa.