Ostatnio musiałem to zrobić kilka razy, więc pomyślałem, że zachowam metodę. StackOverflow ma metodę, która działa świetnie:
().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 zrobił pióro, aby zrobić to szybko:
Zobacz Pen Convert SVG Polygon to Path autorstwa Michaela Schofielda (@michaelschofield) na CodePen.
Umieszczasz swój własny wielokąt w powyższym SVG, a następnie zostaje on zastąpiony ścieżką w DOM. Możesz przeprowadzić inspekcję DevTools, aby uzyskać dane ścieżki.
Celem jest na przykład próba animacji z kształtu z prostymi liniami do kształtu z zakrzywionymi liniami. Narzędzia programowe SVG wyświetlą ten pierwszy jako wielokąt, który jest innym typem danych, które nie mogą być animowane natywnie zgodnie ze składnią ścieżki.