SVG Path Sang Polygon

Chuyển phần tử <path> cong của SVG thành <polygon> cạnh thẳng bằng cách lấy mẫu điểm dọc mỗi đường cong. Hữu ích khi nơi nhận không vẽ được đường Bézier — engine vật lý game, CSS clip-path, máy vẽ, máy cắt laser.

Các bước

1. Tải lên một SVG có chứa path.
2. Đặt số điểm mỗi path — càng nhiều điểm càng bám sát đường cong nhưng kết quả lớn hơn.
3. Chọn số thập phân của toạ độ.
4. Chuyển giữa SVG polygon (path được thay bằng polygon, giữ nguyên thuộc tính trình bày) và danh sách điểm thô, rồi chép hoặc tải về.

Mẹo

• Bắt đầu ở 64 điểm và chỉ tăng khi thấy cạnh thẳng lộ ra ở các khúc cong gắt.
• Giảm số thập phân xuống 0–1 để có chuỗi clip-path nhỏ nhất; giữ 2–3 cho hình va chạm chính xác.
• Số điểm tính theo mỗi path, nên SVG nhiều path sẽ nhân lên rất nhanh — hãy để ý kích thước kết quả.

Câu hỏi thường gặp

Tải lên xong không có gì xảy ra.

SVG không có phần tử <path> — shape vẽ bằng <rect>, <circle> hay <polygon> vốn đã cạnh thẳng (hoặc không cần lấy mẫu).

Polygon không khớp với phần tô của bản gốc.

Path có lỗ (tô even-odd) khi lấy mẫu sẽ thành một vòng ngoài duy nhất. Path phức hợp là trường hợp duy nhất công cụ này không tái tạo chính xác được.

Có gì bị tải lên không?

Không — việc lấy mẫu dùng getPointAtLength của trình duyệt.