SVG path属性用法及代码示例

path属性分别定义文本路径或运动路径以及文本字符，或者对引用的元素进行动画处理。使用此属性的元素包括：<animateMotion>和<textPath>。

用法:

path = path-data

属性值：path属性接受上面提到和下面描述的值

path-data:它具有两个不同的值，即它可以定义文本路径，也可以分别定义要渲染或设置动画的运动路径以及字形。

注意：它的默认值被认为是正常的。

下面的示例说明path属性的用法。

范例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
            margin-left:10px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 10 500 100" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <path fill="green" 
            d = "M10, 90 Q90, 90 90, 45 Q90, 
                10 50, 10 Q10, 10 10, 40 Q10, 
                70 45, 70 Q70, 70 75, 50" /> 
  
        <text> 
            <textPath 
                path = "M10, 90 Q90, 90 90, 
                        45 Q90, 10 50, 10 Q10, 
                        10 10, 40 Q10, 70 45, 
                        70 Q70, 70 75, 50"> 
                It is a Compute Science Portal 
            </textPath> 
        </text> 
    </svg> 
</body> 
  
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green;  
            margin-left:80px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 15 700 200" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <path fill="none" stroke="green" 
            d = "M 100, 100 m -75, 0 a 75, 
                75 0 1, 0 150, 0 a 75, 75  
                0 1, 0 -150, 0" /> 
  
        <circle r="5" fill="green"> 
            <animateMotion dur="5s" 
                repeatCount="indefinite" 
                path="M 100, 100 m -75, 0 a  
                75, 75 0 1, 0 150, 0 a 75,  
                75 0 1, 0 -150,0" /> 
        </circle> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG path attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。