这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

---

SVG（二）——基本形状应用

接上文

（4）一些简单的应用

<line>

• 作用：创建一条直线

• 属性：

  • x1和y1：用于设置直线的起始坐标
  • x2和y2：用于设置直线的结束坐标

• 示例：

  <svg>
      <line x1="100" y1="100" x2="300" y2="300" />
  </svg>
  

• 设置描边属性：

  • 使用stroke: $color为线条设置颜色

    svg {
        stroke: #000;
    }
    
    

    

<polyline>

• 作用：创建一条折线

• 属性：

  • points：用于设置折线的每个拐点的坐标

      <svg>
      <polyline points="100 100, 150 150, 100 200, 150 250"/>
      </svg>
  
  

• 设置样式：

  • 绘制折线后，默认会自动封闭起点和终点，并填充黑色

  • 可以使用fill来设置填充样式，

    • 属性值可以是颜色，以设置填充色
    • 可以是none，表示不需要填充

    svg {
        stroke: #000;
        fill: none; 
        /* 设置为透明色也是可以的 */
        /* fill: transparent; */
    }
    

    

    • 还可以使用stroke-width: $width，为线条设置宽度
      • 属性值默认为1px，可以是有效的长度单位，也可以不加单位，默认单位为px
    • 使用stroke-linecap: round设置线条两端的形状，可设置属性值：
      • butt、sauqre、round

    .polyline1 {
        stroke-linecap: square;
    }
    .polyline2 {
        stroke-linecap: butt;
    }
    .polyline3 {
        stroke-linecap: round;
    }
    
    

    

<rect>

• 作用：创建一个矩形

• 属性：

  • x和y：用于设置矩形左上角的位置

  • rx和ry：用于设置矩形的圆角

  • width和height：用于设置矩形的宽高

  <svg>
      <rect x="100" y="100" rx="12" ry="12" width="100" height="100"/>
  </svg>
  
  

• 设置样式：

  • 使用fill可以设置填充色，使用fill-opacity可以设置填充色的透明度

    svg {
        fill: orange;
        fill-opacity: 0.5;
    }
    

    

<circle>

• 作用：创建一个圆

• 属性：

  • cx和cy：用于定义圆中心点的X、Y坐标，如果省略属性，默认坐标为圆点(0,0)
  • r：用于定义圆的半径

  <svg>
    <circle cx="150" cy="150" r="50"/>
  </svg>
  
  

• 设置样式：

  • 使用stroke-opacity可以设置线条的透明度

    svg {
        stroke: orange;
        stroke-opacity: 0.5;
    }
    

    

<ellipse>

• 作用：创建一个椭圆

• 属性：

  • cx和cy：用于设置椭圆中心的X坐标和Y坐标
  • rx和ry：用于设置椭圆的水平X轴半径和垂直Y轴半径
    • 如果rx == ry，则绘制的椭圆为正圆形

  <svg>
      <ellipse cx="150" cy="150" rx="100" ry="50"/>
  </svg>
  
  

  

<polygon>

• 作用：创建一个多边形（会自动闭合）

• 属性：

  • points：用于设置多边形的每个点的x和y坐标，x和y之间用空格分开，每对坐标之间用,分隔
  • 最后一个点会自动闭合到第一个点

  <svg>
      <polygon points="
  		100 50,
  		115 90,
  		150 90,
  		122 110,
  		135 150,
  		100 125,
  		65 150,
  		78 110,
  		50 90,
  		85 90" />
  </svg>
  
  

  

---

以上内容汇总

形状	示例	描述
直线	<line x1="100" y1="100" x2="300" y2="300" />	(x1,y1)为起点，(x2,y2)为终点
折线	<polyline points="..."/>	points内为点的集合，每两个点以空格分隔为一对坐标，每对坐标以,分隔，所有点按照顺序连成折线
矩形	<rect x="100" y="100" rx="12" ry="12" width="100" height="100"/>	以(x,y)为起点坐标，用rx,ry设置矩形圆角，使用width、height设置矩形宽高
圆形	<circle cx="150" cy="150" r="50"/>	以(cx,cy)为圆心，以r为半径
椭圆形	<ellipse cx="150" cy="150" rx="100" ry="50"/>	以(cx,cy)为圆心，使用rx、ry分别作为X轴和Y轴的半径
多边形	<polygon points="..."	points内为点的集合，同折线，最后一个点会自动闭合到第一个点

---