SVG markerWidth屬性用法及代碼示例

markerWidth屬性指示根據<premarker>和viewBox屬性顯示<marker>時在其中調整視口的寬度。僅<marker>元素正在使用此屬性。

用法:

markerWidth = "length-percentage" | "number"

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

length-percentage：它指示標記的相對寬度或絕對寬度。
數：它以markerUnits屬性定義的單位指示標記的寬度。

注意：markerWidth屬性的默認值為3。

範例1：以下示例說明了markerWidth屬性的用法。

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color:green;  
            margin-left:10px;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="-20 -5 1220 520" 
             xmlns="http://www.w3.org/2000/svg"> 
             <defs> 
                <marker id="geek" 
                    markerWidth="2.5" 
                    markerHeight="2.5" 
                    refX="1.5" 
                    refY="1.5"> 
                   <circle cx="6" cy="6" r="10" 
                    stroke="none" fill="yellow"/> 
                </marker> 
              </defs> 
  
            <polyline points="20, 20 40, 25 60, 
                    40 80, 120 120, 140 200, 180" 
                    style="fill:none;stroke:green; 
                    stroke-width:5"  
                    marker-mid="url(#geek)"/> 
          </svg> 
    </body> 
     
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color:green;  
            margin-left:10px; 
            font-size:25px;"> 
            GeeksforGeeks 
        </h1> 
  
        <svg viewBox="0 15 1220 520" 
             xmlns="http://www.w3.org/2000/svg"> 
            <defs> 
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="5" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="10"
                    markerHeight="8"
                    orient="auto"> 
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="#008000"/> 
                </marker> 
            </defs> 
  
            <polyline points="100, 105 180, 
                    20 100, 17 50, 100" 
                    stroke="green" 
                    stroke-width="5"
                    fill ="none"
                    marker-start="url(#geek)"/> 
          </svg> 
    </body> 
     
</html>

輸出：

相關用法

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