Marker SVG: tạo đầu mũi tên tùy chỉnh luôn thẳng hàng

Để gắn đầu mũi tên tùy chỉnh vào đường dẫn SVG, định nghĩa hình bên trong <marker> và tham chiếu ID của nó bằng marker-end. Đặt refX và refY thành điểm trên hình cần gặp điểm cuối đường dẫn. Sau đó chọn marker có xoay theo đường dẫn và lớn lên theo độ rộng đường viền hay không.

Những lựa chọn đó giải quyết vấn đề khác nhau. Mũi tên có thể chỉ đúng hướng nhưng vẫn lệch điểm cuối. Nó cũng có thể thẳng hàng trên đường viền mảnh rồi trở nên quá lớn khi nét dày hơn. Hướng dẫn này tách vị trí, hướng và kích thước bằng một hình mũi tên tự tạo.

Bắt đầu với SVG nhỏ, đầy đủ

Lưu nội dung sau thành markers.svg và mở trong trình duyệt. Mũi tên là ví dụ viết thủ công, có đầu nhọn tại (11, 6) trong không gian tọa độ 12 × 12. Nó không phải kết quả chuyển đổi PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

Đường dẫn đầu là đường thẳng; đường thứ hai là đường cong. Cả hai tham chiếu cùng marker ở cả hai đầu. Khối <defs> lưu định nghĩa, còn tham chiếu trên đường dẫn làm nó hiển thị. Tài liệu marker của MDN trình bày thuộc tính gắn ở đầu, giữa và cuối.

Dùng ID duy nhất trong tài liệu chứa. Nếu kết hợp nhiều SVG nội tuyến, thêm tiền tố vào ID marker và cập nhật mọi tham chiếu url(#...) khớp với chúng. Hướng dẫn sprite symbol SVG giải thích cùng vấn đề quản lý tham chiếu cho biểu tượng dùng lại.

Đặt điểm dự định vào điểm cuối

refX="11" refY="6" cho biết điểm nào của hình marker cần trùng với điểm cuối đường dẫn. Nó không di chuyển chính đường dẫn. Trong ví dụ này, điểm đó là đầu nhọn.

So sánh với refX="0" refY="0". Trình duyệt đặt gốc tọa độ marker lên điểm cuối, để đầu nhọn xa hơn sang phải và xuống dưới trên đường ngang. Tăng kích thước marker làm lỗi rõ hơn; không sửa được điểm neo.

MDN mô tả refX và refY là tọa độ điểm tham chiếu của marker. Đọc chúng theo tọa độ riêng của hình, bao gồm viewBox, thay vì đoán từ chiều rộng hiển thị.

Chúng tôi mở SVG đầy đủ riêng và hiển thị phép so sánh trong trình duyệt. Đổi điểm tham chiếu đưa đầu nhọn lên dấu chéo cam. Đổi hướng đảo mũi tên đầu. Đổi chế độ đơn vị điều khiển mũi tên có lớn theo đường hay không. Những quan sát này áp dụng cho ví dụ này; kiểm tra tệp xuất thực tế trong ứng dụng sẽ nhận nó.

Đầu nhọn neo chính xác ở điểm cuối cũng để đường viền kéo dài tới tận điểm đó. Trên nét dày, một phần đường viền có thể vẫn nhìn thấy cạnh đầu nhọn hẹp, như phép so sánh cho thấy. Nếu đoạn nối đó quan trọng, điều chỉnh họa tiết, điểm neo hoặc điểm cuối đường dẫn cùng nhau và kiểm tra điểm nối. Đặt marker không cắt ngắn đường viền bên dưới.

Để đường cong điều khiển hướng

Với đầu mũi tên ở cuối đường dẫn, orient="auto" theo hướng đường dẫn ở điểm đó. Hướng kết thúc đường cong đến từ tiếp tuyến cục bộ, nên mũi tên không nhất thiết hướng theo đường thẳng nối hai điểm đầu cuối.

Với mũi tên ở cả hai đầu, dùng orient="auto-start-reverse". Nó hoạt động như auto ở cuối nhưng xoay marker đầu thêm 180 độ. Tài liệu orient của MDN mô tả đây là cách dùng lại một đầu mũi tên để chỉ ra ngoài từ cả hai đầu.

Phép so sánh trên phải làm khác biệt thấy rõ: với auto, mũi tên đầu hướng dọc đường cong. Với auto-start-reverse, nó hướng ra xa điểm bắt đầu. Bạn không cần bản sao thứ hai của hình đã lật thủ công.

Kiểm tra hướng đường dẫn khi kết quả bất ngờ. Đảo đường dẫn đổi đầu nào là điểm bắt đầu. Mũi tên chỉ luồng cần được gắn theo hướng đó, ngay cả khi hai đầu tình cờ ở cùng vị trí màn hình như trước.

Quyết định độ dày nét có đổi kích thước marker không

markerUnits đặt hệ tọa độ dùng cho kích thước và nội dung marker. Mặc định là strokeWidth; lựa chọn khác là userSpaceOnUse. Xem tài liệu markerUnits của MDN để hiểu khác biệt.

Mũi tên trải rộng 10 trong 12 đơn vị ngang của viewBox. Với markerWidth="6" và markerUnits="strokeWidth", chiều rộng chưa xoay là 10 / 12 × 6 × stroke-width: 20 đơn vị người dùng trên đường viền 4 đơn vị và 40 trên đường viền 8 đơn vị. Phép so sánh dưới trái dùng những cài đặt đó.

Để mũi tên rộng 20 đơn vị ở cả hai độ dày đường viền, đổi định nghĩa thành:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

Phép so sánh dưới phải dùng các giá trị đó. Giữ markerWidth="6" trong khi chỉ đổi chế độ đơn vị sẽ tạo mũi tên nhỏ hơn nhiều vì sáu đơn vị không còn nhân với độ rộng đường viền.

userSpaceOnUse không có nghĩa số pixel màn hình cố định. Thay đổi tỷ lệ SVG bao quanh hoặc hệ tọa độ vẫn có thể đổi kích thước hiển thị. Kiểm tra marker ở kích thước bố cục cuối, đặc biệt khi họa tiết lớn được giảm thành chú thích sơ đồ nhỏ.

Chuẩn bị họa tiết tùy chỉnh trước khi biến thành marker

Với tam giác hoặc mũi tên đơn giản, vẽ đường dẫn trực tiếp. Với hình vector có sẵn, giữ đường dẫn gốc và quyết định tọa độ nào cần gắn vào đường. Giữ lỗ có chủ ý, đơn giản hóa chi tiết biến mất ở kích thước dự định và cho hình đủ chỗ trong khung nhìn marker.

Nếu đầu mũi tên tùy chỉnh hoặc họa tiết trang trí chỉ còn PNG hoặc JPG, quy trình ảnh sang vector của PerfectVector có thể giúp khôi phục một bản SVG trước bước đóng gói này. So sánh dáng bao ngoài và khoảng trống nhỏ với nguồn, xóa hình nền không mong muốn, rồi chọn giới hạn và điểm neo của hình đã duyệt. Chuyển đổi không tạo định nghĩa marker, gán hướng đường dẫn hay thêm hành vi nối trong sơ đồ.

Giữ màu tường minh khi thử. Ví dụ này dùng marker xanh ngọc và đường xanh navy để ranh giới vẫn thấy rõ. Nếu mũi tên của bạn cần một màu xuyên suốt, chủ động đặt cả hai màu tô/vẽ và kiểm tra kết quả bàn giao. Hướng dẫn chỉnh màu SVG trình bày màu tô cố định và kiểu có thể cản đổi màu.

Kiểm tra tệp ở nơi sẽ sử dụng

Giữ bản chính chỉnh sửa được, rồi thử bản bàn giao qua trang web, trình chỉnh sửa hoặc quy trình xuất thực tế. Bản xem trước trình duyệt đúng xác nhận diện mạo trong trình duyệt của tệp đó; không xác nhận hành vi nhập của mọi ứng dụng.

• Xác nhận mỗi url(#...) trỏ tới ID marker dự định sau khi đóng gói hoặc tối ưu hóa.
• Kiểm tra đường thẳng và đường cong, bao gồm marker đầu nếu dùng.
• So sánh độ dày nét mảnh nhất và dày nhất trong thiết kế.
• Kiểm tra đầu nhọn, điểm nối và mọi hình bị cắt ở kích thước hiển thị cuối.
• Mở lại SVG bàn giao độc lập và so sánh với bản xem trước nguồn.

Marker là phần trang trí nhìn thấy được gắn vào vị trí đường dẫn. Chúng không tạo liên kết ngữ nghĩa giữa các đối tượng sơ đồ. Với điểm nối và hành vi khuôn hình riêng của trình chỉnh sửa sơ đồ, dùng hệ thống hình có sẵn của nó; hướng dẫn hình tùy chỉnh draw.io trình bày công việc riêng đó.

Marker cũng không tự động là đường bao cắt được nối thực sự. Nếu nơi sử dụng cần hình học cắt khép kín, chuẩn bị và kiểm tra bản bàn giao riêng dựa trên đường dẫn trong trình chỉnh sửa vector. Đường và đầu mũi tên chồng nhau trên màn hình không chứng minh đường bao đã hợp nhất. Các hướng dẫn chuẩn bị SVG khác trình bày làm sạch hình và kiểm tra về sau.

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

Vì sao đầu mũi tên SVG lệch khỏi đường? Kiểm tra refX và refY theo tọa độ hình marker. Chúng xác định điểm được đặt lên điểm cuối đường dẫn. Trong ví dụ này, đầu nhọn tại 11,6; dùng 0,0 đặt gốc tọa độ ở đó thay vào.

Tôi dùng lại một đầu mũi tên ở cả hai đầu thế nào? Tham chiếu cùng marker bằng marker-start và marker-end, đồng thời dùng orient="auto-start-reverse". Bản thể ở đầu đảo hướng còn bản thể ở cuối theo hướng đường dẫn.

Vì sao đầu mũi tên lớn lên khi làm đường dày hơn? Giá trị markerUnits mặc định là strokeWidth. Dùng userSpaceOnUse khi marker cần giữ kích thước trong tọa độ người dùng của phần tử, rồi điều chỉnh markerWidth và markerHeight cho hệ đơn vị đó.

Marker có biến mũi tên thành một đường dẫn khép kín không? Không. Định nghĩa marker vẫn riêng với đường dẫn tham chiếu nó. Chuẩn bị và kiểm tra hình học thực sự nối nếu quy trình cắt hoặc chỉnh sửa phía sau yêu cầu.

Nguồn tham khảo

1. MDN — marker — Định nghĩa marker, các hình hỗ trợ và thuộc tính gắn.
2. MDN — refX — Đặt điểm tham chiếu ngang trong hệ tọa độ marker.
3. MDN — refY — Đặt điểm tham chiếu dọc trong hệ tọa độ marker.
4. MDN — orient — Xoay tự động và đảo hướng bản thể ở đầu.
5. MDN — markerUnits — Kích thước tương đối với đường viền và trong tọa độ người dùng.

Bắt đầu với một họa tiết và kiểm tra điểm neo, hướng, kích thước trên cả đường thẳng lẫn đường cong. Nếu họa tiết của bạn chỉ tồn tại dạng ảnh raster, chuẩn bị một bản SVG, kiểm tra dáng bao ngoài và khoảng trống, rồi đóng gói các đường dẫn được chấp nhận thành marker.