SVG中的路径


1、使用moveto与lineto


    width="150px" height="150px" viewBox="0 0 150 150">
    
        
        
        
        
        
        
    

2、使用closepath


    width="150px" height="150px" viewBox="0 0 150 150">
    
        
        
        
        
        
        
    

3、相对moveto和lineto


小写为相对坐标,大写为绝对坐标,moveto小写位于首位时为绝对坐标,closepath大小写效果相同


    width="150px" height="150px" viewBox="0 0 150 150">
    
    

4、路径的快捷方式


    width="150px" height="150px" viewBox="0 0 150 150">
    
        
        
        
        
        
        
        
    

5、椭圆弧


圆弧命令以字母A(绝对坐标)或者a(相对坐标)开始,后面紧跟7个参数

  • 点所在椭圆的x半径和y半径
  • 椭圆的x轴旋转角度x-axis-rotation
  • large-arc-flag,如果需要圆弧的角度小于180°,其为0;如果需要圆弧的角度大于或等于180°,则为1
  • sweep-flag,如果需要弧以负角度绘制则为0,以正角度绘制则为1
  • 终点的x坐标和y坐标(起点由左后一个绘制的点或者左后一个moveto命令确定

    width="150px" height="150px" viewBox="0 0 150 150">
    
        
        
        
        
        
        
        
        
    

6、填充规则


    width="150px" height="150px" viewBox="0 0 150 150">
    
        
        
    
    
        
        
    
    
        
        
    
    
        
        
    

7、元素


    width="200px" height="200px" viewBox="0 0 200 200">
   
       
           
       
       
           
       
       
           
       
   
    
    

svg