當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


HTML marker-start屬性用法及代碼示例


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




相關用法


注:本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 HTML marker-start Attribute。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。