marker-start屬性在給定形狀的可標記元素的起始頂點繪製一個多標記或箭頭。除折線和路徑外,所有可標記元素的第一個頂點與最後一個頂點相同。在這種情況下,如果marker-start和marker-end的值都不是“none”,則兩個標記都將在最後一個頂點上呈現。 marker-start屬性僅在路徑數據的起始頂點上呈現。 marker-mid屬性僅對以下七個元素有效:路徑,折線,多邊形,線,圓,橢圓和矩形。
用法:
marker-start = "marker-reference | none"
屬性值:該屬性接受上麵提到和下麵描述的兩個值。
- marker-reference:它在元素的起始頂點繪製一個標記。
- none:它不會在元素的起始頂點添加任何標記。
範例1:下麵的代碼說明了如何使用值為“ none”的marker-start屬性。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
stroke-width:15;
stroke:green;
fill:none;
marker-start:none;
}
</style>
</head>
<body>
<div class="Container" style="
color:green; text-align:center;">
<h1>GeeksforGeeks</h1>
<svg>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0"
refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks">
<path d="M 100, 75 C 125,
50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
輸出:
範例2:下麵的代碼說明了如何使用值為marker-reference的marker-start屬性。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
stroke-width:10;
stroke:green;
fill:none;
}
</style>
</head>
<body>
<div class="Container" style="
color:green; text-align:center;">
<h1>GeeksforGeeks</h1>
<svg>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0"
refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks" style=
"marker-start:url(#Triangle);">
<path d="M 100, 75 C
125, 50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
輸出:
支持的瀏覽器:
- Chrome
- Firefox
- Edge
- Opera
- Safari
相關用法
- HTML <html> xmlns屬性用法及代碼示例
- HTML scoped屬性用法及代碼示例
- HTML <th> valign屬性用法及代碼示例
- HTML <col> align屬性用法及代碼示例
- HTML poster屬性用法及代碼示例
- HTML Class屬性用法及代碼示例
- HTML style屬性用法及代碼示例
- HTML oninvalid用法及代碼示例
- HTML <select> autocomplete屬性用法及代碼示例
- HTML <table> bgcolor屬性用法及代碼示例
- HTML onsubmit用法及代碼示例
- HTML onunload用法及代碼示例
- HTML srcdoc屬性用法及代碼示例
- HTML Marquee truespeed用法及代碼示例
- HTML onkeyup用法及代碼示例
- HTML ondrop用法及代碼示例
- HTML <td> abbr屬性用法及代碼示例
- HTML onpageshow用法及代碼示例
- HTML reversed屬性用法及代碼示例
- HTML readonly屬性用法及代碼示例
- HTML required屬性用法及代碼示例
- HTML onsearch用法及代碼示例
- HTML oncopy屬性用法及代碼示例
注:本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 HTML marker-start Attribute。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。