marker
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Thuộc tính marker CSS trỏ đến một điểm đánh dấu sẽ được vẽ tại các đỉnh đầu tiên, giữa và cuối cùng của đường dẫn của phần tử; tức là tại tất cả các đỉnh của nó. Điểm đánh dấu phải được định nghĩa bằng phần tử SVG <marker>, và chỉ có thể được tham chiếu bằng giá trị <url>. Giá trị của thuộc tính CSS ghi đè bất kỳ giá trị nào của các thuộc tính marker-start, marker, và marker-end trong SVG.
Đối với nhiều hình dạng hỗ trợ điểm đánh dấu, đỉnh đầu tiên và cuối cùng ở cùng một vị trí: ví dụ, góc trên bên trái của <rect>. Trong các hình dạng như vậy, nếu cả điểm đánh dấu đầu tiên và cuối cùng đều được xác định, hai điểm đánh dấu sẽ được vẽ tại điểm đó, mặc dù chúng có thể không chỉ cùng một hướng.
Đối với các đỉnh giữa, hướng mà mỗi điểm đánh dấu chỉ được xác định là hướng nằm giữa hướng ở cuối đoạn đường dẫn trước và hướng của điểm bắt đầu của đoạn đường dẫn tiếp theo. Điều này có thể được hiểu là tích có hướng của các vectơ được xác định bởi hai hướng đường dẫn.
Note:
Thuộc tính marker chỉ có hiệu lực đối với các phần tử có thể sử dụng điểm đánh dấu SVG. Xem marker-start để biết danh sách.
Cú pháp
marker: none;
marker: url("markers.svg#arrow");
/* Giá trị toàn cục */
marker: inherit;
marker: initial;
marker: revert;
marker: revert-layer;
marker: unset;
Giá trị
none-
Không có điểm đánh dấu nào sẽ được vẽ tại mỗi đỉnh của đường dẫn phần tử.
<marker-ref>-
Một
<url>tham chiếu đến một điểm đánh dấu được xác định bởi phần tử SVG<marker>, sẽ được vẽ tại mỗi đỉnh của đường dẫn phần tử. Nếu tham chiếu URL không hợp lệ, không có điểm đánh dấu nào sẽ được vẽ tại các đỉnh của đường dẫn.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
marker =
none |
<marker-ref>
<marker-ref> =
<url>
Ví dụ
<svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="triangle"
viewBox="0 0 10 10"
markerWidth="10"
markerHeight="10"
refX="1"
refY="5"
markerUnits="strokeWidth"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
</marker>
</defs>
<polyline
id="test"
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20 130,10 150,10 170,20 170,100 120,100" />
</svg>
polyline#test {
marker: url("#triangle");
}
Đặc tả
| Thông số kỹ thuật |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerShorthand |
Tương thích trình duyệt
Xem thêm
marker-startmarker-end- Phần tử SVG
<marker>