Saya telah melakukan ini beberapa kali baru-baru ini jadi saya fikir saya akan menyimpan kaedahnya. StackOverflow mempunyai kaedah yang sangat berkesan:
().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 Tukar Poligon SVG ke Jalan oleh Michael Schofield (@michaelschofield) di CodePen.
Anda meletakkan Poligon anda sendiri di SVG di atas dan kemudian digantikan dengan jalan di DOM. Anda boleh memeriksa DevTools untuk mendapatkan data laluan.
Tujuannya, sebagai contoh, anda cuba menghidupkan dari bentuk dengan garis lurus ke bentuk dengan garis melengkung. Alat perisian SVG akan menghasilkan yang pertama sebagai poligon, yang merupakan jenis data yang berbeza yang tidak dapat beranimasi dengan sintaks jalan.