<marker>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <marker> của SVG định nghĩa một đồ họa được dùng để vẽ mũi tên hoặc polymarker trên một phần tử <path>, <line>, <polyline> hoặc <polygon> nhất định.
Marker có thể được gắn vào các hình bằng các thuộc tính marker-start, marker-mid, và marker-end.
Ngữ cảnh sử dụng
| Categories | Container element |
|---|---|
| Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Thuộc tính
markerHeight-
Thuộc tính này định nghĩa chiều cao của viewport của marker. Kiểu giá trị: <length>; Giá trị mặc định:
3; Có thể hoạt ảnh: có markerUnits-
Thuộc tính này định nghĩa hệ tọa độ cho các thuộc tính
markerWidth,markerHeightvà nội dung của<marker>. Kiểu giá trị:userSpaceOnUse|strokeWidth; Giá trị mặc định:strokeWidth; Có thể hoạt ảnh: có markerWidth-
Thuộc tính này định nghĩa chiều rộng của viewport của marker. Kiểu giá trị: <length>; Giá trị mặc định:
3; Có thể hoạt ảnh: có orient-
Thuộc tính này định nghĩa hướng của marker tương đối với hình mà nó được gắn vào. Kiểu giá trị:
auto|auto-start-reverse| <angle>; Giá trị mặc định:0; Có thể hoạt ảnh: có preserveAspectRatio-
Thuộc tính này định nghĩa cách fragment svg phải bị biến dạng nếu nó được nhúng trong một container có aspect ratio khác. Kiểu giá trị: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; Giá trị mặc định:xMidYMid meet; Có thể hoạt ảnh: có refX-
Thuộc tính này định nghĩa tọa độ x cho điểm tham chiếu của marker. Kiểu giá trị:
left|center|right| <coordinate>; Giá trị mặc định:0; Có thể hoạt ảnh: có refY-
Thuộc tính này định nghĩa tọa độ y cho điểm tham chiếu của marker. Kiểu giá trị:
top|center|bottom| <coordinate>; Giá trị mặc định:0; Có thể hoạt ảnh: có viewBox-
Thuộc tính này định nghĩa ranh giới của viewport SVG cho fragment SVG hiện tại. Kiểu giá trị: <list-of-numbers>; Giá trị mặc định: none; Có thể hoạt ảnh: có
Giao diện DOM
Phần tử này triển khai giao diện SVGMarkerElement.
Ví dụ
Vẽ mũi tên
Ví dụ sau cho thấy cách vẽ một mũi tên trên một đường thẳng và trên một đường cong.
Với đường cong, một mũi tên được vẽ tại mỗi điểm bằng marker marker-mid.
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Một marker dùng làm mũi tên -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<!-- Một đường thẳng với marker -->
<line
x1="10"
y1="10"
x2="90"
y2="90"
stroke="black"
marker-end="url(#arrow)" />
<!-- Một đường cong với các marker -->
<path
d="M 110 10
C 120 20, 130 20, 140 10
C 150 0, 160 0, 170 10
C 180 20, 190 20, 200 10"
stroke="black"
fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
Vẽ các polymarker
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Định nghĩa marker mũi tên -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- Định nghĩa marker chấm -->
<marker
id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- Trục tọa độ với mũi tên ở cả hai hướng -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Đường dữ liệu với các polymarker -->
<polyline
points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
Dùng context fill và stroke
Ví dụ sau cho thấy cách dùng các giá trị context-fill và context-stroke để khiến marker dùng cùng fill và stroke với hình mà nó được gắn vào.
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<marker
id="circle"
markerWidth="6"
markerHeight="6"
refX="3"
refY="3"
markerUnits="strokeWidth">
<circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
</marker>
<style>
path {
marker: url("#circle");
}
</style>
<path d="M 10,10 30,10 h 10" stroke="black" />
<path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
<path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
<path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
Đặc tả
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerElement |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính marker liên quan:
marker-start,marker-mid, vàmarker-end