Softonic

Trình dựng Path SVG

Bước 1 / 2

Bấm vào vùng trống để thêm điểm. Kéo điểm để di chuyển. Xóa điểm cuối bằng nút bấm.

Tiếp theo

Thuộc tính d trên một <path> SVG là một ngôn ngữ chuyên biệt tí hon: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Mỗi chữ cái là một lệnh (moveto, lineto, Bézier bậc ba, đóng path), mỗi con số là một tọa độ hoặc điểm điều khiển. Trình dựng này cho phép bạn nhấp lên canvas để đặt các điểm neo và kéo chúng để chỉnh hình, đồng thời xem path vẽ ra theo thời gian thực. Bật làm mượt để biến các đoạn thẳng thành đường cong Bézier bậc ba, khép kín hình, rồi sao chép thuộc tính d được tạo hoặc toàn bộ SVG.

Cách dựng một path

  1. 1

    Nhấp để thêm điểm

    Mỗi lần nhấp đặt một điểm neo lên canvas; path nối chúng theo thứ tự, bắt đầu từ `M` (moveto).

  2. 2

    Kéo để chỉnh hình

    Kéo bất kỳ điểm nào để di chuyển nó, và xóa điểm mới nhất bằng nút. Tối thiểu hai điểm.

  3. 3

    Thẳng hoặc mượt

    Để các điểm nối bằng đoạn thẳng `L`, hoặc bật Làm mượt để biến chúng thành đường cong Bézier bậc ba `C`.

  4. 4

    Đóng hoặc để mở

    Bật Đóng path để thêm `Z` quay về điểm bắt đầu, hoặc để mở cho một polyline/nét.

  5. 5

    Sao chép thuộc tính d

    Chuỗi `d` được tạo gọn gàng và cách nhau bởi khoảng trắng, sẵn sàng để dán vào bất kỳ SVG nào; bạn cũng có thể sao chép hoặc tải xuống toàn bộ SVG.

Bảng tra cứu lệnh path SVG

Trình dựng trực quan ở trên tạo ra các lệnh M, L, C và Z (moveto, đường thẳng, Bézier bậc ba và đóng path). Phần còn lại của bộ lệnh bên dưới là tài liệu tham khảo để đọc và chỉnh sửa thủ công bất kỳ chuỗi d nào bạn dán ở nơi khác. Chữ cái viết hoa dùng tọa độ tuyệt đối; chữ thường dùng độ lệch tương đối từ vị trí bút hiện tại.

Lệnh Tên Cú pháp
M / m Moveto M x y
L / l Lineto L x y
H / h Lineto ngang H x
V / v Lineto dọc V y
C / c Bézier bậc ba C x1 y1 x2 y2 x y
S / s Bézier bậc ba mượt S x2 y2 x y
Q / q Bézier bậc hai Q x1 y1 x y
T / t Bézier bậc hai mượt T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Một ví dụ thực hành: dấu tick bo tròn

M 4 12 L 10 18 L 20 6

Ba lệnh: di chuyển tới (4, 12), kẻ tới (10, 18), kẻ tới (20, 6). Thêm stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" vào path và bạn có một glyph dấu tick gọn gàng.

Lệnh arc là khó nhất

A rx ry x-axis-rotation large-arc-flag sweep-flag x y nhận bảy số:

  • rx, ry, bán kính ellipse
  • x-axis-rotation, góc xoay của ellipse theo độ
  • large-arc-flag, 0 cho cung ngắn, 1 cho cung dài
  • sweep-flag, 0 cho ngược chiều kim đồng hồ, 1 cho thuận chiều
  • x, y, điểm cuối

Lật các flag từng cái một để xem cùng hai điểm cuối có thể nối theo bốn cách khác nhau như thế nào.

Mẹo

  • Giữ số nhỏ và tròn. Bắt tọa độ vào lưới pixel hoặc nửa pixel; tránh 17 chữ số thập phân.
  • Ưu tiên lệnh viết hoa khi path của bạn đứng độc lập. Chữ thường (tương đối) tiện khi bạn sẽ tịnh tiến path sau này.
  • Chỉ đóng khi bạn tô. Nếu một path chỉ được nét, Z không thêm thay đổi hình ảnh nào và tiết kiệm một byte.
  • Chạy qua SVGO. Số 0 ở cuối, khoảng trắng trùng và lệnh lặp lại được thu gọn gọn gàng.

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

Tọa độ trong d cùng đơn vị với viewBox. Một path thiết kế cho viewBox="0 0 24 24" đặt trên viewBox="0 0 100 100" sẽ xuất hiện ở góc một phần tư trên-trái. Hãy co giãn tọa độ hoặc đổi kích thước viewBox.

Khi bạn dự định tịnh tiến hoặc lặp lại path. Lệnh tương đối giữ hình dạng có thể di chuyển, bạn có thể thêm một M mới ở bất kỳ đâu và mọi thứ phía sau di chuyển theo.

Có. <polyline points="0,0 10,10 20,0"> thành <path d="M 0 0 L 10 10 L 20 0" />. Một polygon thêm một Z cuối. Hầu hết bộ tối ưu làm điều này tự động vì path nén tốt hơn.

Với hiệu ứng vẽ-vào dùng CSS stroke-dasharray + stroke-dashoffset. Để di chuyển một phần tử dọc theo path dùng SMIL <animateMotion> với href trỏ tới id của path.

Không. Lệnh path được tính trong trình duyệt và không bao giờ gửi đi đâu.

Công cụ liên quan

Bộ chọn màu Material Design

Duyệt bảng màu Material Design. Sao chép bất kỳ sắc độ nào (từ 50 đến A700) dưới dạng HEX, RGB hoặc HSL chỉ với một thao tác chạm.

Trình tạo giấy kẻ ngang

Tạo giấy kẻ ngang in được miễn phí. Chọn kẻ college, rộng hoặc hẹp, đặt khoảng cách dòng theo mm, khổ giấy và một đường lề, rồi in hoặc tải xuống tệp SVG.

Trình tạo giấy kẻ ô

Tạo giấy kẻ ô để in trực tuyến: chọn lưới ô vuông hoặc chấm, đặt khoảng cách theo mm, chọn A4 hoặc Letter và màu nét tùy chỉnh, rồi in hoặc tải xuống tệp SVG sắc nét.

Công cụ tạo mẫu thêu chữ thập

Chuyển JPEG, PNG hoặc WebP thành sơ đồ thêu chữ thập để in với 10–150 mũi, 2–40 màu tùy chỉnh, ký hiệu, số đếm chính xác và kích thước vải.

Trình chuyển đổi ảnh hàng loạt

Chuyển đổi cục bộ tối đa 20 ảnh mà trình duyệt đọc được sang JPG, PNG hoặc WebP, rồi tải từng tệp hoặc một tệp ZIP.

Trình thay đổi kích thước ảnh hàng loạt

Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.

Công cụ này có phiên bản bằng các ngôn ngữ khác