Bunu son zamanlarda birkaç kez yapmak zorunda kaldım, bu yüzden yöntemi kurtaracağımı düşündüm. StackOverflow'un harika çalışan bir yöntemi vardır:
().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 bunu hızlı yapmak için bir Kalem yaptı:
CodePen'de Michael Schofield (@michaelschofield) tarafından hazırlanan Pen Convert SVG Polygon to Path konusuna bakın.
Kendi Poligonunuzu yukarıdaki SVG'ye koyarsınız ve ardından DOM'da bir yolla değiştirilir. Yol verilerini almak için DevTools'u inceleyebilirsiniz.
Amaç, örneğin, düz çizgileri olan bir şekilden eğri çizgileri olan bir şekle canlandırmaya çalışıyorsunuz. SVG yazılım araçları, ilkini, yol sözdizimine göre yerel olarak canlandırılamayan farklı bir veri türü olan çokgen olarak çıktılar.