Thuộc tính marker CSS

Định nghĩa và cách sử dụng

marker Thuộc tính chỉ định một dấu hiệu sẽ được vẽ trên tất cả các điểm đỉnh của đường dẫn phần tử (tức là điểm đầu tiên, giữa và cuối cùng).

Hình dạng của dấu hiệu được xác định bởi phần tử SVG <marker> và được tham chiếu bằng giá trị url().

CSS marker Giá trị của thuộc tính sẽ che phủ bất kỳ giá trị nào của thuộc tính marker trong SVG.

Mô hình

Ví dụ 1

Chỉ định một dấu hiệu (mũi tên), dấu hiệu này sẽ được vẽ trên các điểm đầu tiên, giữa và cuối cùng của đường dẫn của phần tử:

#test {
  marker: url(#arrow);
}

Thử ngay

Ví dụ 2

Chỉ định một dấu hiệu (đường tròn), dấu hiệu này sẽ được vẽ trên các điểm đầu tiên, giữa và cuối cùng của đường dẫn của phần tử:

#test {
  marker: url(#circle);
}

Thử ngay

Ngữ pháp CSS

marker: none|url|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Giá trị mặc định. Không vẽ bất kỳ dấu hiệu nào trên đường dẫn.
url Tham chiếu URL của dấu hiệu được xác định bởi phần tử SVG <marker>.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome Edge Firefox Safari Opera
80 80 72 13.1 67

Trang liên quan

Giáo trình:Điểm đánh dấu SVG

Tham khảo:Thuộc tính marker-start CSS

Tham khảo:Thuộc tính marker-mid CSS

Tham khảo:Thuộc tính marker-end CSS