×

Cách sử dụng thẻ <marker> để tạo điểm đánh dấu trong SVG trong HTML

Avatar of admin
admin 0 Views

Trong thiết kế web hiện đại, SVG (Scalable Vector Graphics) là một định dạng phổ biến để hiển thị hình ảnh vector, cho phép hình ảnh không bị mất chất lượng khi phóng to hoặc thu nhỏ. Một trong những tính năng mạnh mẽ của SVG là khả năng sử dụng thẻ <marker> để tạo điểm đánh dấu cho các đoạn đường, đường thẳng, và các hình dạng khác.

Khái niệm cơ bản về thẻ <marker>

Thẻ <marker> trong SVG cho phép bạn xác định một điểm đánh dấu có thể được đặt ở đầu, giữa hoặc cuối của một đường (path), tuyến (line), đa giác (polyline), hoặc đường gấp khúc (polygon). Điều này rất hữu ích khi bạn muốn vẽ mũi tên, nút điều hướng hoặc các điểm nổi bật khác.

Cú pháp cơ bản của thẻ <marker>

Cú pháp cơ bản để sử dụng thẻ <marker> như sau:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="markerArrow" markerWidth="10" markerHeight="10" refX="0" refY="3"
        orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="190" y2="190" stroke="#000" stroke-width="2"
    marker-end="url(#markerArrow)" />
</svg>

Giải thích từng thuộc tính và thành phần

  1. <defs>: Thẻ <defs> là nơi chứa các định nghĩa phụ trợ mà bạn không muốn hiển thị trực tiếp. Đây là nơi thích hợp để khai báo thẻ <marker>.

  2. <marker>: Thẻ này định nghĩa điểm đánh dấu, bao gồm các thuộc tính:

    • id: Đặt một ID duy nhất để tham chiếu điểm đánh dấu.
    • markerWidth và markerHeight: Kích thước của điểm đánh dấu.
    • refX và refY: Tọa độ tham chiếu để định vị điểm đánh dấu.
    • orient: Xác định hướng của điểm đánh dấu (có thể là một góc cố định hoặc "auto" để tự động căn chỉnh).
    • markerUnits: Quy định đơn vị đo của marker (có thể là "strokeWidth" hoặc "userSpaceOnUse").

  3. <path>: Phần tử bên trong <marker> mô tả hình dạng của điểm đánh dấu bằng cách sử dụng đường dẫn SVG.

  4. <line>: Đường thẳng mà trên đó điểm đánh dấu sẽ hiển thị. Thuộc tính marker-end dùng để gán điểm đánh dấu vào cuối đường thẳng.

Ứng dụng thực tế

1. Tạo Mũi Tên Đơn Giản:

Bạn có thể sử dụng thẻ <marker> để tạo các loại mũi tên đơn giản.

<svg width="300" height="100">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3"
        orient="auto" fill="context-stroke">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
  </defs>
  <line x1="10" y1="50" x2="290" y2="50" stroke="black" stroke-width="2" marker-end="url(#arrow)" />
</svg>

2. Đánh Dấu Điểm Giữ Liên Kết:

Thay vì chỉ đánh dấu tại điểm kết thúc, bạn có thể dùng thuộc tính marker-mid để đánh dấu cả đoạn giữa.

<svg width="300" height="100">
  <defs>
    <marker id="circle" markerWidth="10" markerHeight="10" refX="5" refY="5">
      <circle cx="5" cy="5" r="3" style="fill: red;"/>
    </marker>
  </defs>
  <polyline points="10,50 100,50 200,50 290,50" stroke="blue" stroke-width="2"
    fill="none" marker-mid="url(#circle)" />
</svg>

Kết luận

Việc sử dụng thẻ <marker> trong SVG mang lại khả năng tùy biến cao và thêm nhiều yếu tố thẩm mỹ cho các đồ họa vector trên web. Bằng cách hiểu rõ các thuộc tính và cách kết hợp chúng với các thành phần SVG khác, bạn có thể tạo ra những thiết kế đẹp mắt và chuyên nghiệp.

Comments

Bài viết liên quan