经过上周的学习，今天的总结分享我想把svg分成三个部分：基本元素、path、动画。
基本元素：
主要是svg画图形时常用到的一些 矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线 <line>、折线 <polyline>、多边形 <polygon>，以及一些可能会用到的元素
path：
主要是基本元素中比较复杂，功比较多的一个元素 路径 <path>
动画：
主要是5大成员<set>、<animate>、<animateColor>、<animateTransform>、<animateMotion>
现在开始吧！
首先讲一下svg的环境：
环境
环境
<svg width="320" height="320" viewbox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
……
</svg>
解释：
1.svg标签表示svg容器，标签内写svg的元素、动画
2.width、height表示容器的尺寸
3.xmlns是命名空间的声明，svg是使用XML格式的
4.viewbox这个参数可要可不要。但是它关乎你画的图形是否支持缩放功能。
a、在一个200*300的画布上画出一个圆心(100, 100)半径100的圆
b、当我把画布改成100*300，会是什莫效果？
超出画布的部分被隐藏了
c、如果我希望画布改变了，图形也能够完全显示，有什莫办法？
难道我要手动去修改圆的参数？
如果只有1个很简单的图形的画也就很好操作，但如果是一个很复杂个图形呢？如果有很多的图形呢？在实际项目中不会只有一个svg，一个svg也不会只有一个简单图形，在实际项目中用这种方法的成本就很高了
那还有没有其他的办法呢？当然有啦!viewbox就可以解决这个问题。
d、viewBox 有四个参数分别代表：最小X轴数值；最小y轴数值；svg宽度；svg高度
viewbox="0 0 200 300"
通常情况前两个参数不用变 0 0，刚好代表了坐标原点的位置，如果需要改变坐标原点的位置，则改变前两个参数；
后两个参数分别和svg的width height对应
e、如图是svg 200*300，viewbox="0 0 200 300"的效果，和没有添加viewbox一样
f、改变svg100*300， 不变viewbox="0 0 200 300"，
可以看到图形随着画布的缩小而缩小了，而且是同比例的。
这是视口不变，画布改变大小的情况；
g、不变svg200*300， 改变viewbox="0 0 100 150"，
这是视口改变，画布不变的情况；
黑色表示没有改变比例，绿色表示改变比例后的图形，但是由于svg画布的大小限制，只能显示粉色部分。
h、总结：
视口不变，画布改变，图形随着画布等比例变化；
视口改变，画布不变，图形随着视口等比例变化；
如果不设置视口，画布改变，图形不变
栗子：
下面是我自己新建的一个html文件，使用svg，同时使用style标出svg容器，这样就能够知道svg容器在哪里有多大了；
当然，你也可以直接新建一个svg文件
基本元素
一、矩形 <rect>
width、height：矩形的宽、高
x、y：矩形的坐标位置，以左上角为定位，
（坐标系的圆点在svg的左上角，相当于整个svg在直角坐标系的第四象限）
fill：填充颜色
fill-opacity： 填充颜色透明度
stroke：边框颜色（画笔颜色）
stroke-width：边框宽度
stroke-opacity：边框透明度
rx、ry：圆角x、y
给绘制的图形添加css，有三种方式：
Way1：在标签中使用style属性
Way2：在标签中使用css样式属性
Way3：添加css文件，通过class类添加样式属性
二、圆形 <circle>
cx、cy：圆心的坐标位置
r：半径
三、椭圆 <ellipse>
cx、cy：圆心坐标位置
rx、ry：半径x、半径y
四、线 <line>
直线：
x1、y1：直线起点坐标位置
x2、y2：直线终点坐标位置
虚线：
stroke-dasharray：至少有两个参数，用空格或者逗号隔开；分别表示划线长度和空格长度，如果有多个参数就表示画线 空格 画线 空格 ……
stroke-dashoffset：偏移，正数起点往左移，负数起点往右移
做导航菜单鼠标悬浮的动画效果用这个虚线的可以做出很多很炫的效果；
做进度条的动画效果也是蛮不错的
主要就是stroke-dasharray、stroke-dashoffset这俩参数值的变化，会是画线和空格的长度，位置产生变化，从而看起来非常的帅气，哈哈
五、折线 <polyline>
points：折线每个点的坐标位置，用逗号隔开每个点
六、多边形 <polygon>
points：折线每个点的坐标位置，用逗号隔开每个点
图形是封闭的，最后一个点，自动连接第一个点
七、其他
1.文本
<text x="10" y="20" fill="pink">
这是我的文字
</text>
注意：文本的xy起点是以文字左下角为准
