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 April 2017.

Thuộc tính marker-end trong CSS trỏ đến một marker sẽ được vẽ tại đỉnh cuối cùng trong đường dẫn của phần tử; tức là tại đỉnh kết thúc của nó. Marker 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 này ghi đè lên mọi giá trị của thuộc tính marker-end trong SVG.

Đối với nhiều hình dạng hỗ trợ marker, đỉnh đầu tiên và đỉnh cuối cùng là cùng một điểm: ví dụ, góc trên bên trái của phần tử <rect>. Trong những hình dạng như vậy, nếu cả marker đầu và marker cuối đều được định nghĩa, hai marker sẽ được vẽ tại điểm đó, mặc dù chúng có thể không hướng về cùng một chiều.

Note: Thuộc tính marker-end chỉ có hiệu lực đối với các phần tử có thể sử dụng SVG marker. Xem marker-end để biết danh sách.

Cú pháp

css

marker-end: none;
marker-end: url("markers.svg#arrow");

/* Giá trị toàn cục */
marker-end: inherit;
marker-end: initial;
marker-end: revert;
marker-end: revert-layer;
marker-end: unset;

Giá trị

none: Không có marker nào được vẽ tại đỉnh cuối cùng của đường dẫn phần tử.
<marker-ref>: Một <url> tham chiếu đến marker được định nghĩa bởi phần tử SVG <marker>, để vẽ tại đỉnh cuối cùng của đường dẫn phần tử. Nếu tham chiếu URL không hợp lệ, không có marker nào được vẽ tại đỉnh cuối của đường dẫn.

Định nghĩa hình thức

Initial value	`none`
Applies to	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Inherited	yes
Computed value	as specified, but with `<url>` values made absolute
Animation type	discrete

Cú pháp hình thức

marker-end = 
  none          |
  <marker-ref>  

<marker-ref> = 
  <url>

Ví dụ

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 120 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" />
</svg>

css

polyline#test {
  marker-end: url("#triangle");
}

Đặc tả kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2 # MarkerEndProperty

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content