marker-start

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-start trong CSS trỏ đến một marker sẽ được vẽ tại đỉnh đầu tiên trong đường dẫn của phần tử; tức là tại đỉnh bắt đầu 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-start trong SVG.

Đối với nhiều hình dạng hỗ trợ marker, đỉnh đầu tiên và đỉnh cuối cùng nằm ở cùng một vị trí: 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 chỉ về cùng một hướng.

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

Cú pháp

css

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

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

Giá trị

none: Không có marker nào được vẽ tại đỉnh đầu tiên 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 đầu tiên 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 đầu 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-start = 
  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-start: url("#triangle");
}

Đặc tả kỹ thuật

Specification
Scalable Vector Graphics (SVG) 2 # MarkerStartProperty

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