📌  相关文章
📜  SVG 路径元素

📅  最后修改于: 2021-11-07 09:23:39             🧑  作者: Mango

SVG代表可缩放矢量图形。 SVG 元素路径用于定义从某个位置开始到特定位置结束的路径。 SVG 路径可用于创建任何基本形状。

句法：

属性：该元素接受上面提到和下面描述的四个属性：

  • d：用于定义路径的形状。
    • M：用于将一个点移动到某个位置。
    • L：用于制作一条线到一个点。
    • C:用于制作曲线到一个点。
  • pathLength：用于定义路径的总长度。
  • stroke：用于定义笔触颜色。
  • fill：用于定义SVG的填充颜色。

为了更好地理解 SVG 元素，下面给出了几个示例。

示例 1：

HTML



  
  
  Document


  
    
    
    
  

HTML



  
  
  Document


  
GeeksforGeeks SVG Path

  
    // Creating a rectangle starting point is 10, 10
    // Making a line to 10 100
    // Moving point to 10 100
    // Making line to  100 100
    // Moving point to 100 100
    // Making line to  100 10
    // Moving point to 100 10
    // Making line to  10 10 -->
    
    
  

输出：

示例 2：

HTML 




  
  
  Document


  
GeeksforGeeks SVG Path

  
    // Creating a rectangle starting point is 10, 10
    // Making a line to 10 100
    // Moving point to 10 100
    // Making line to  100 100
    // Moving point to 100 100
    // Making line to  100 10
    // Moving point to 100 10
    // Making line to  10 10 -->
    
    
  

输出：