SVG的简单介绍
SVG 是一种文本格式。每个 SVG 图形都是使用与 HTML 类似的标记定义的，而且 SVG 代码可以直接包含在 HTML 文档中，或者动态插入到 DOM 中。除了 IE8 及之 前版本之外，所有浏览器都支持 SVG。
我们可以把svg想象成一个可以在上面作画的画布，它的默认单位是px，除了像素之外还可以支持其他单位，em、 pt、in、cm 和 mm。
<svg width="500" height="50">
//创建了一块宽500 高为50的画布
</svg>
简单的图形
在 svg 标签中可以嵌入很多可见的元素，包括 rect、circle、ellipse、line、 text 和 path。
| 属性 | 功能 | 详细 |
|---|---|---|
| circle | 用于绘制圆形 | cx 和 cy 用于指定圆心坐标，而 r 用于指定半径。 |
| rect | 用于绘制矩形 | x 和 y 用于指定矩形左上角的坐标，而 width 和 height 用于 指定其大小 |
| ellipse | 椭圆形 | 与circle 类似，只不过每个轴要分别指定半径。 |
| line | 用于绘制直线， | x1 和 y1 用于指定起点坐标，x2 和 y2 用于 指定终点坐标，必须用 stroke 指定直线的颜色才能看得见 |
| text | 用于绘制文本 | x 用于指定文本左上角的位置，y 用于指定字体的基线位置。文本会继承 CSS 为父元素指定的字体样式 |
| fill | 用来填充颜色 | 颜色值 与使用 CSS 一样，可以使用颜色名、十六进制值，或 RGB、RGBA 值 |
| stroke | 元素的轮廓 | 颜色值 |
| stroke-width | 带单位的数值 | 属性定义了一条线，文本或元素轮廓厚度，通常单位是像素 |
| opacity | 透明度 | 0.0（完全透明）到 1.0（完全不透明）之间的数值 |
| 可以删除所有样式属性 通过class 为它来自定样式 |
//rect 绘制矩形
<svg width="500" height="50">
<rect x="0" y="0" width="500" height="50"></rect>
</svg>
//circle 绘制圆形
<svg width="500" height="50">
<circle cx="250" cy="25" r="25"></circle>
</svg>
//ellipse 绘制椭圆型
<svg width="500" height="50">
<circle cx="100" cy="100" r="100" fill="blue" stroke="gray" stroke-wdht="2">
</svg>
//line 用来绘制直线
<svg width="500" height="50">
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>
</svg>
//text 用来绘制文本
<svg width="500" height="50">
<text x="250" y="25" font-fimily="serif" font-size="25" fill="gray">Easy-peasy</text>
</svg>
为SVG元素添加样式
SVG 的默认样式是黑色填充，没有描边。如果你想添加其他样式，必须自己给元素 添加。 也可以删除所有样式属性，通过 article 类来为它定义样式（就像给其他 HTML 元素应用样式一样）
<style>
.pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
</style>
<svg width="500" height="50">
// <circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"></circle>
<circle cx="25" cy="25" r="22" class="pumpkin" />
</svg>
分层与绘制顺序
SVG 中没有“层”和深度的概念，也不支持 CSS 的 z-index 属性，因此属性只能 在二维画布表面上排布。 如果要绘制多个图形，它们是会重叠的：
<rect x="0" y="0" width="30" height="30" fill="purple" />
<rect x="20" y="5" width="30" height="30" fill="blue" />
<rect x="40" y="10" width="30" height="30" fill="green" />
<rect x="60" y="15" width="30" height="30" fill="yellow" />
<rect x="80" y="20" width="30" height="30" fill="red" />
//代码中元素出现的顺序决定了它们的深度次序。在图 3-22 中，紫色（purple）方
//形在代码中出现得最早，因此浏览器首先绘制它。然后，在它的“上面”绘制蓝色 （blue）方形。
//接着依次是绿色、黄色和红色的方形
、
透明度
有两种应用透明度的方式：或者使用带透明通道的 RGB 值，或者设置 opacity （不透明度）值
可以在为 fill 或 stroke 属性指定颜色的时候使用 rgba()。rgba() 接受 0 到 255 （包含及）之间的三个值，分别代表红、绿、蓝，还接受第四个 0.0 到 1.0（包含及） 之间的透明度值
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128,0,128,1.0)"></circle>
<circle cx="50" cy="25" r="20" fill="rgba(0,0,255,0.75)"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0,255,0,0.5)"></circle>
<circle cx="100" cy="25" r="20" fill="rgba(255,255,0,0.25)"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255,0,0,0.1)"></circle>
</svg>
使用rgba() 可以分别为填充 (fill) 和描边(stroke)颜色应用透明度。
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255,255,0,0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"></circle>
