SVG 绘制
+SVG是什么？
SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
SVG 通常用于定义用于网络的基于矢量的图形；
SVG优点
-
SVG 图像可通过文本编辑器来创建和修改；
-
SVG 图像可被搜索、索引、脚本化或压缩；
-
SVG 是可伸缩的；
-
SVG 图像可在任何的分辨率下被高质量地打印；
-
SVG 可在图像质量不下降的情况下被放大。
SVG与canvas 的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较：
- canvas：依赖分辨率，不支持事件处理器，弱的文本渲染能力，能够以 .png 或 .jpg 格式保存结果图像， 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
- svg：不依赖分辨率， 支持事件处理器，最适合带有大型渲染区域的应用程序（比如谷歌地图），复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）， 不适合游戏应用。
SVG 绘制矩形
<rect> </rect>绘制矩形
| 主要属性 | 主要作用 |
|---|---|
| x/y | 绘图位置 |
| width/height | 矩形长宽 |
| fill | 填充颜色，默认黑色 |
| stroke | 描边的颜色 |
| stroke-width | 描边的宽度 |
| rx/ry | 描边的圆角 |
<svg width="500" height="500">
<rect x="100" y="100" width="150" height="100" fill="red" stroke="green" stroke-width="2" rx="10"></rect>// 绘制矩形
</svg>SVG绘制圆
<circle></circle>绘制圆
| 属性 | 作用 |
|---|---|
| cx/cy | 圆绘制的位置，圆心位置 |
| r | 圆的半径 |
<svg width="500" height="500">
<circle cx="150" cy="200" r="50"></circle>
</svg>SVG绘制椭圆
使用<rect></rect>绘制椭圆
<svg width="500" height="500">
<rect x="100" y="300" width="100" height="50" rx="50" ry="25"></rect>
</svg>使用<ellipse></ellipse>绘制椭圆
| 属性 | 作用 |
|---|---|
| cx/cy | 椭圆绘制的位置，圆心的位置。 |
| rx/ry | 椭圆的半径 |
<svg width="500" height="500">
<ellipse cx="150" cy="400" rx="50" ry="25"></ellipse>
</svg>绘制多边形
从起点回到终点形成多边形
<svg width="500" height="500">
<polyline points="100 300 300 300 300 350 100 300" stroke="red" fill="none"></polyline>
</svg>关闭路径方法构成多边形
polygon 自动闭合路径
<svg width="500" height="500">
<polygon points="100 400 300 400 300 450" stroke="red" fill="none"></polygon>
</svg>SVG阴影
<deft></deft>标签
我们把所有需要再次使用的引用元素定义在 <defs> 元素里面
优点：这样做可以增加 SVG 内容的易读性和无障碍。在 <defs> 元素中定义的图形元素不会直接呈现。可以在视图的任意地方利用 <use> 元素呈现这些元素。
SVG滤镜
<filter></filter>引用滤镜
<svg width="500" height="100">
<defs>
<filter id="blurFilter" y="-5" height="40">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
</filter>
</defs>
<ellipse cx="155" cy="60" rx="25" ry="15" stroke="none" fill="blue" filter="url(#blurFilter)"></ellipse>
</svg>SVG移偏
<feOffset>
<feBlend> 两个标签结合在一起即可创建图形的阴影效果
通过属性 dx 和属性 dy 的值指定一个偏移量。
<svg>
<defs>
<filter id="filter-offset" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-offset)"></rect>
</svg>SVG滤镜的高斯模糊
<feGaussianBlur> 通过通过属性 stdDeviation 指定偏移的像素数量。
<svg>
<defs>
<filter id="filter-blur" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-blur)"></rect>
</svg><feColorMatrix>为阴影涂上一层颜色svg
<svg>
<defs>
<filter id="filter-matrix" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0
0 0.2 0 0 0
0 0 0.2 0 0
0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#filter-matrix)"></rect>
</svg>