SVG基本使用（一、基本概念、使用方法、绘制矩形/圆/椭圆/直线/折现/多边形/）

一、SVG概念

• 1.什么是SVG?
  SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图

• 2.位图和矢量图
  在计算机中有两种图形, 一种是位图, 一种是矢量图

  • 2.1 位图:
    传统的 jpg / png / gif图都是位图
    位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px
  • 2.2 位图的优点和缺点:
    • 优点: 色彩丰富逼真
    • 缺点: 放大后会失真, 体积大
  • 2.3 矢量图
    矢量图是用XML格式（HTML也是XML格式，是特殊的xml）定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
  • 2.4 矢量图优点和缺点:
    • 优点: 放大后不会失真（因为小方格不是固定死的）, 体积小
    • 缺点: 不易制作色彩变化太多的图象

3.svg的宽高：

• 默认值：同canvas一样，svg也有默认的宽高、；并且默认宽高同canvas一样也是：300 * 150
• 修改宽高：同canvas不一样。canvas只能在行内修改。而svg使用css和行内属性都可以修改宽高。

二、SVG使用方式

1.SVG常见的四种使用方式

• 1.1、内嵌到HTML中（直接在HTML的body中绘制）

    <svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
    </svg>

• 1.2、通过浏览器直接打开SVG文件（SVG保存为单独文件，通过浏览器打开）
  svg需要添加属性xmlns（xml name space：命名空间），用于告诉浏览器，此文件不是普通xml文件，而是用来表示SVG图形的。下文为circle.svg文件内的代码

    <svg width="500" height="500" **xmlns="http://www.w3.org/2000/svg"**>
         <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000"></circle>
    </svg>

• 1.3、在HTML的img标签中引用
  通过img标签引用SVG文件
  <img src="circle.svg" alt="">
• 1.4、作为CSS背景使用

    div{
        width: 500px;
        height: 500px;
        background: url("circle.svg");
    }
    <div></div>

三、SVG绘图

1.绘制矩形：使用rect标签

• 主要属性：
  • x/y：绘图位置；
  • width/height：矩形长宽；
  • fill：填充颜色、默认黑色
  • stroke：描边的颜色。
  • stroke-width：描边的宽度
  • rx/ry:圆角：以10为半径画圆

<svg width="500" height="500">
    <rect x="100" y="100" width="150" height="100" fill="#fea" stroke="#aef" stroke-width="2" rx="10"></rect>
</svg>

2.绘制圆和椭圆

2.1、 绘制圆：

• 方法一：使用矩形绘制

	<svg width="500" height="500">
  	  <rect x="100" y="10" width="100" height="100" rx="50"></rect>
	</svg>

• 方法二：使用专门的标签绘制
  cx/cy：圆绘制的位置，圆心位置
  r:圆的半径

	<svg width="500" height="500">
	     <circle cx="150" cy="200" r="50"></circle>
	</svg>

2.2、绘制椭圆

• 方法一：使用矩形绘制

<svg width="500" height="500">
    <!--绘制椭圆-->
   <rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>

• 方法二：使用专门的标签绘制
  cx/cy：椭圆绘制的位置，圆心的位置
  rx/ry:椭圆圆的半径

	<svg width="500" height="500">
	   <ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
	</svg>

3.绘制直线、折线、多边形

3.1、绘制直线

• x1/y1：起点
• x2/y2：终点
• stroke：线条颜色，必须有

<svg width="500" height="500">
    <line x1="100" y1="100" x2="200" y2="100" stroke="#abf"></line>
</svg>

3.2、绘制折线

• points：设置所有折线的点
• fill：是否填充。默认填充

<svg width="500" height="500">
    <polyline points="100 150 300 150 300 200" stroke="#abf" fill="none"></polyline>
</svg>

3.3、绘制多边形

• 方法一：折线从起点回到终点，就是多边形

<svg width="500" height="500">
    <polyline points="100 300 300 300 300 350 100 300" stroke="#abf" fill="none"></polyline>
</svg>

• 方法二：关闭路径
  polygon和polyline差不多，只是会自动关闭路径

<svg width="500" height="500">
    <polygon points="100 400 300 400 300 450" stroke="#abf" fill="none"></polygon>
</svg>