Saya harus melakukan ini beberapa kali baru-baru ini jadi saya pikir saya akan menyimpan metode ini. StackOverflow memiliki metode yang berfungsi dengan baik:
().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 membuat Pena untuk melakukannya dengan cepat:
Lihat Pen Convert SVG Polygon to Path oleh Michael Schofield (@michaelschofield) di CodePen.
Anda meletakkan Polygon Anda sendiri di SVG di atas dan kemudian akan diganti dengan jalur di DOM. Anda dapat memeriksa DevTools untuk mendapatkan data jalur.
Tujuannya adalah, misalnya, Anda mencoba menganimasikan dari bentuk dengan garis lurus ke bentuk dengan garis lengkung. Alat perangkat lunak SVG akan menampilkan yang pertama sebagai poligon, yang merupakan jenis data berbeda yang tidak dapat dianimasikan secara asli ke sintaks jalur.