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

marker-mid屬性在給定形狀的可標記元素的所有頂點(不包括第一個和最後一個頂點)上繪製一個多邊形標記或箭頭。 marker-mid屬性僅對以下七個元素有效，它們是路徑，折線，多邊形，線，圓，橢圓和矩形。

用法:

marker-mid = "marker-reference | none"

屬性值：該屬性接受上麵提到和下麵描述的兩個值。

marker-reference:此參數在第一個和最後一個頂點以外的可標記元素頂點處繪製標記。
none:它不會在頂點處添加任何標記。

範例1：下麵的代碼說明了如何使用無值marker-mid屬性。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #Arrow { 
            stroke-width:20; 
            stroke:green; 
            fill:none; 
            marker-mid: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="L 0 0 L 10 5 L 0 10 z"> 
                </path> 
            </marker> 
  
            <g id="Arrow"> 
                <path d="M 100, 75 C 125,  
                    50 150, 50 175, 75"> 
                </path> 
            </g> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

範例2：下麵的代碼說明了如何使用值marker-reference的marker-mid屬性。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #Arrow { 
            stroke-width:20; 
            stroke:rgb(30, 236, 30); 
            fill:none; 
            marker-mid:url("#Triangle"); 
        } 
    </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 id="Arrow"> 
                <path d="M 100, 75 C 125,  
                    50 150, 50 175, 75"> 
                </path> 
            </g> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

Chrome
Firefox
Opera
Safari
Edge
IE瀏覽器

相關用法

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