Trình chỉnh sửa SVG Path trực quan

Phần tử path của SVG mô tả hình dạng bằng thuộc tính d, ví dụ "M 100 100 C 150 50 …", và việc tự viết tay các tọa độ cùng điểm điều khiển Bézier rất dễ sai. Trình chỉnh sửa này cung cấp một khung vẽ 500 × 500 để bạn tạo đường dẫn bằng cách nhấp và kéo, đồng thời bảng bên phải lập tức sinh ra mã d của SVG và quy tắc CSS clip-path: path() tương ứng. Công cụ phù hợp để làm biểu tượng, phác thảo logo, cắt ảnh theo hình dạng bất thường, hoặc đơn giản là để hiểu các lệnh đường dẫn SVG hoạt động ra sao.

Ở chế độ "Thêm điểm", nhấp vào khung vẽ để đặt một điểm neo. Điểm đầu tiên là điểm bắt đầu (M), các điểm sau mặc định là nút cong (C) với hai tay nắm điều khiển màu xanh dương. Chuyển sang "Chọn/Chỉnh sửa" để kéo các điểm neo hình cỏ ba lá màu xanh lá nhằm di chuyển nút, hoặc kéo tay nắm để chỉnh hướng và độ cong. Khi đã chọn một nút, mục "Loại nút" cho phép đổi nút đó thành Thẳng (L) hoặc Cong (C). Ở chế độ "Xóa điểm", chỉ cần nhấp vào điểm neo là xóa. Công cụ hỗ trợ chuột, bàn di chuột và màn hình cảm ứng.

Bật "Bám theo lưới" thì các điểm neo sẽ bám vào lưới cách nhau 20 pixel, giúp vẽ hình đối xứng hay ngay ngắn dễ hơn nhiều; nền lưới có thể bật hoặc tắt bất cứ lúc nào. Đánh dấu "Đóng đường dẫn (Z)" sẽ nối điểm cuối về điểm đầu, tạo thành hình khép kín có thể tô màu. Nếu không muốn bắt đầu từ con số không, hãy tải các mẫu trái tim, ngôi sao, giọt nước hoặc đầu Alpa rồi chỉnh lại. Mọi tọa độ đều được làm tròn thành số nguyên nên mã sinh ra ngắn gọn và dán dùng được ngay.

Thuộc tính d dùng hệ tọa độ từ 0 đến 500, vì vậy khi đưa vào SVG hãy kèm viewBox="0 0 500 500" để hình co giãn theo kích thước SVG. CSS clip-path: path() thì khác: tọa độ tính bằng pixel và không co giãn theo phần tử, nên phù hợp nhất với phần tử kích thước 500 × 500 pixel. Nếu cần cắt hình đáp ứng, hãy dùng clipPath của SVG với clipPathUnits hoặc thu phóng phần tử bằng transform. Mọi thao tác đều chạy trong trình duyệt, không có gì bị tải lên.