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

marker-end屬性在給定形狀的可標記元素的最後一個頂點繪製一個多標記或箭頭。除折線和路徑外，所有可標記元素的第一個頂點與最後一個頂點相同。在這種情況下，如果marker-start和marker-end的值都不是“none”，則兩個標記都將在最後一個頂點上呈現。 marker-end屬性僅在路徑數據的最後一個頂點上呈現。 marker-mid屬性僅對以下七個元素有效，它們是路徑，折線，多邊形，線，圓，橢圓和矩形。

用法:

marker-end = "marker-reference | none"

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

marker-reference：它在元素的最後一個頂點繪製一個標記。
沒有：它不會在元素的最後一個頂點添加任何標記。

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

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div class="Container" style="  
         color:green; text-align:center;"> 
        <h1>GeeksforGeeks</h1> 
        <svg width="600px" height="100px"> 
            <defs> 
                <marker id="arrow" markerWidth="10" 
                    markerHeight="10" refX="0" 
                    refY="3" orient="auto"
                    markerUnits="strokeWidth"> 
                    <path d="M0, 0 L0, 6 L9, 3 z" 
                            fill="#006400" /> 
                </marker> 
            </defs> 
            <line x1="150" y1="50" x2="450" y2="50" 
                stroke="#000" stroke-width="5" 
                marker-end="url(#arrow)" /> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

範例2：下麵的代碼說明了如何使用值“none”的marker-end屬性。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div class="Container" style=" 
        color:green; text-align:center;"> 
  
        <h1>GeeksforGeeks</h1> 
        <svg width="600px" height="100px"> 
            <defs> 
                <marker id="arrow" markerWidth="10"
                    markerHeight="10" refX="0" 
                    refY="3" orient="auto"
                    markerUnits="strokeWidth"> 
                    <path d="M0, 0 L0, 6 L9, 3 z" 
                        fill="#006400" /> 
                </marker> 
            </defs> 
            <line x1="150" y1="50" x2="450" y2="50" 
                stroke="#000" stroke-width="5" 
                marker-end="none" /> 
        </svg> 
    </div> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

Firefox
Chrome
Safari
Edge
Opera

相關用法

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