知识点准备（摘自阮一峰老师的网络日志）

1.标签

SVG 代码都放在顶层标签``之中。下面是一个例子。

的width属性和height属性，指定了SVG 图像在` HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，`viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

2.circle标签

``标签代表圆形。

上面的代码定义了三个圆。标签的`cx`、`cy`、`r`属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。

class属性用来指定对应的 CSS类。

SVG 的 CSS 属性与网页元素有所不同。

3.animate标签

``标签用于产生动画效果。

上面代码中，矩形会不断移动，产生动画效果。

animate的属性含义如下。

可以在多个属性上面定义动画。

两种方式主要利用了svg的stroke-dasharray属性控制描边幅度

stroke-dasharray 属性通俗来讲就是把描边变成点状形态，类似border 的 dashed 的效果

stroke-dasharray 可接受多个参数

例如：