Chuyển đổi đa giác thành dữ liệu đường dẫn - Thủ thuật CSS

Tôi đã phải làm điều này một vài lần gần đây nên tôi nghĩ rằng tôi sẽ lưu phương pháp. StackOverflow có một phương pháp hoạt động tuyệt vời:

().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 đã tạo ra một cây bút để làm điều đó nhanh chóng:

Xem Bút chuyển đổi đa giác SVG thành đường dẫn của Michael Schofield (@michaelschofield) trên CodePen.

Bạn đặt Đa giác của riêng mình trong SVG ở trên và sau đó nó được thay thế bằng một đường dẫn trong DOM. Bạn có thể kiểm tra DevTools để lấy ra dữ liệu đường dẫn.

Ví dụ, mục đích là bạn đang cố tạo hoạt ảnh từ một hình dạng có các đường thẳng sang một hình dạng có các đường cong. Các công cụ phần mềm SVG sẽ xuất ra dữ liệu trước đây dưới dạng đa giác, đây là một loại dữ liệu khác không thể hoạt động nguyên bản theo cú pháp đường dẫn.