SVG pathLength屬性用法及代碼示例

pathLength屬性以用戶單位定義路徑的總長度。使用此屬性的元素是：<circle>，<ellipse>，<line>，<path>，<polygon>，<polyline>和<rect>

用法:

pathLength = number

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

number:它可以是帶小數部分的數字或整數。

下麵的示例說明pathLength屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        path { 
            stroke:green; 
            stroke-width:5; 
            stroke-dasharray:12; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;"> 
        GeeksforGeeks 
    </h2> 
  
    <svg viewBox=" 0 0 400 60" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <path d="M 0,10 h100" /> 
  
        <path d="M 0,20 h100" pathLength="80" /> 
    </svg> 
</body> 
  
</html>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        path { 
            stroke:green; 
            stroke-width:5; 
            stroke-dasharray:12; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green;"> 
        GeeksforGeeks 
    </h2> 
    <svg viewBox="0 20 400 60" 
        xmlns="http://www.w3.org/2000/svg"> 
        <path d="M 0,30 h100" pathLength="60" /> 
        <path d="M 0,40 h100" pathLength="30" /> 
        <path d="M 0,50 h100" pathLength="10" /> 
    </svg> 
</body> 
  
</html>

輸出：

相關用法

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