marker-end
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Thuộc tính marker-end xác định mũi tên hoặc dấu đánh dấu nhiều điểm sẽ được vẽ tại đỉnh cuối cùng của hình dạng đã cho.
Đối với mọi phần tử hình dạng, ngoại trừ <polyline> và <path>, đỉnh cuối cùng giống với đỉnh đầu tiên. Trong trường hợp này, nếu cả giá trị của marker-start và marker-end đều không phải là none, thì hai dấu đánh dấu sẽ được vẽ tại đỉnh cuối cùng đó. Với các phần tử <path>, đối với mỗi đoạn con khép kín, đỉnh cuối cùng giống với đỉnh đầu tiên. marker-end chỉ được vẽ tại đỉnh cuối cùng của dữ liệu đường dẫn.
Note:
Là một thuộc tính trình bày, marker-end cũng có một thuộc tính CSS tương ứng: marker-end. Khi cả hai cùng được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="triangle"
viewBox="0 0 10 10"
refX="1"
refY="5"
markerUnits="strokeWidth"
markerWidth="10"
markerHeight="10"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<polyline
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20"
marker-end="url(#triangle)" />
</svg>
Lưu ý sử dụng
| Giá trị | none | <marker-ref> |
|---|---|
| Giá trị mặc định | none |
| Có thể hoạt ảnh | discrete |
none-
Cho biết rằng không có biểu tượng đánh dấu nào sẽ được vẽ tại đỉnh cuối cùng.
<marker-ref>-
Giá trị này là một tham chiếu tới phần tử
<marker>, phần tử đó sẽ được vẽ tại đỉnh cuối cùng. Nếu tham chiếu không hợp lệ, thì sẽ không có dấu đánh dấu nào được vẽ.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerEndProperty |
Khả năng tương thích trình duyệt
Xem thêm
<marker>marker-startmarker-mid- Thuộc tính CSS
marker-end