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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。