SVG <điểm đánh dấu>
Điểm đánh dấu SVG - <điểm đánh dấu>
Phần tử <marker> được sử dụng để tạo điểm đánh dấu cho điểm bắt đầu, giữa và kết thúc của <line> , <path> , <polyline> hoặc <polygon> .
Tất cả các điểm đánh dấu SVG được xác định trong phần tử <defs> . Phần tử <defs> là viết tắt của "định nghĩa" và chứa định nghĩa về các phần tử đặc biệt (chẳng hạn như điểm đánh dấu).
Điểm đánh dấu được gắn vào các hình dạng bằng cách sử dụng các thuộc tính marker-start , marker-mid và marker-end .
Phần tử <marker> có sáu thuộc tính cơ bản để định vị và đặt kích thước của điểm đánh dấu:
| Attribute | Description |
|---|---|
| id | The unique id for the marker |
| markerHeight | The height of the marker. Default is 3 |
| markerWidth | The width of the marker. Default is 3 |
| refX | The x position where the marker connects with the vertex. Default is 0 |
| refY | The y position where the marker connects with the vertex. Default is 0 |
| orient | The orientation of the marker relative to the shape it is attached to. Can be "auto", "auto-start-reverse" or an angle. Default is 0 |
Một dòng có điểm đánh dấu bắt đầu và kết thúc
Ví dụ sau đây tạo một đường có điểm đánh dấu bắt đầu hình tròn và điểm đánh dấu kết thúc đầu mũi tên:
Đây là mã SVG:
Ví dụ
<svg height="250" width="350" xmlns="https://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10
z" fill="black" />
</marker>
</defs>
<line x1="10" y1="10" x2="300" y2="200"
stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)"
/>
</svg> Hãy tự mình thử »Giải thích mã:
- Phần tử
<defs>chứa hai điểm đánh dấu: một điểm đánh dấu#circlevà một điểm đánh dấu#arrow - Hình dạng của điểm đánh dấu được xác định trong phần tử
<marker> - Phần tử
<marker>đầu tiên chứa phần tử<circle>vẽ một vòng tròn nhỏ - Phần tử
<marker>thứ hai chứa phần tử<path>vẽ một hình tam giác nhỏ - Phần tử
<line>tham chiếu hai điểm đánh dấu bằng thuộc tínhmarker-startvà thuộc tínhmarker-end
Thêm điểm đánh dấu ở giữa
Ví dụ sau đây tạo một đường đa tuyến có điểm đánh dấu bắt đầu, điểm đánh dấu ở giữa và điểm đánh dấu kết thúc:
Đây là mã SVG:
Ví dụ
<svg height="250" width="350" xmlns="https://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="2" fill="black" />
</marker>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10
z" fill="black" />
</marker>
</defs>
<polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3"
fill="none" marker-start="url(#circle)" marker-mid="url(#circle)"
marker-end="url(#arrow)" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Phần tử
<defs>chứa hai điểm đánh dấu: một điểm đánh dấu#circlevà một điểm đánh dấu#arrow - Hình dạng của điểm đánh dấu được xác định trong phần tử
<marker> - Phần tử
<marker>đầu tiên chứa phần tử<circle>vẽ một vòng tròn nhỏ - Phần tử
<marker>thứ hai chứa phần tử<path>vẽ một hình tam giác nhỏ - Phần tử
<polyline>tham chiếu hai điểm đánh dấu với thuộc tínhmarker-start, thuộc tínhmarker-midvà thuộc tínhmarker-end - Lưu ý rằng thuộc tính
marker-startvà thuộc tínhmarker-midtrỏ đến cùng một điểm đánh dấu (#circle). Bằng cách này, điểm đánh dấu có thể được sử dụng lại nhiều lần
