SVG
1、SVG 是一种绘图技术，SVG 的全名叫可缩放矢量图形(Scalable Vector Graphics)。
2、SVG 使用 XML 格式定义图像。
3、可伸缩，不失真。
简单示例：
stroke-width="2" fill="red" />
复制代码
1、SVG的结构
他是标准的 XML 文档结构。
/p>
"/Graphics/SVG/1.1/DTD/svg11.dtd">
stroke-width="2" fill="red" />
复制代码
包括：
1、xml申明。
2、DOCTYPE申明。dtd是一种约束 xml 文件的标准格式。
3、以及一个svg标签包裹的图形描述。
2、嵌入html
第一种：标签
复制代码
第二种：标签
复制代码
第三种：标签
复制代码
最后，也可以使用a标签，链接到svg文件。
View SVG file
复制代码
tips：浏览器是能够直接展示svg的图形的。
区别和优势：
从兼容性考虑，使用object的方式展示svg更好。object不支持js脚本。
从脚本使用的角度考虑，使用 embed 和 iframe 更好一些。
3、svg矩形——rect
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
复制代码
矩形，它的标签是rect。
相关属性：width、height、style、class、x、y、rx、ry。
x、y，分别是svg的矩形，相对svg的偏移距离。
rx、ry 表示给矩形添加圆角。
style 和 class 都是给当前 svg 写样式的。
常见样式属性如下：
.svg {
width: 100px;
height: 100px;
fill: rgb(0,0,255);
stroke-width: 1;
stroke: black;
fill-opacity: 1;
stroke-opacity: 1;
}
复制代码
fill 表示填充颜色。
stroke-width 表示图形边框宽度。
stroke 表示边框颜色。
opacity 表示整个图形的不透明度
fill-opacity 填充颜色的不透明度
stroke-opacity 边框的不透明度
4、svg圆形——circle
他有这么几个属性：
cx、cy 表示圆形的坐标点。
r 表示圆形的半径距离
5、svg椭圆——ellipse
复制代码
cx、cy 表示坐标中心，
rx、ry 表示横坐标轴 和 纵坐标轴。
6、svg直线——line
style="stroke:rgb(255,0,0);stroke-width:2"/>
复制代码
x1、y1 表示起点。
x2、y2 表示终点。
7、svg多边形——ploygon
style="fill:lime;stroke:purple;stroke-width:1"/>
复制代码
fill-rule: nonzero
fill-rule: evenodd
表示对于重合部分的渲染规则！
8、svg曲线——ployline
元素是用于创建任何只有直线的形状
style="fill:none;stroke:black;stroke-width:3" />
复制代码
9、svg路径——path
路径规则
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
复制代码
10、svg文本——text
基本使用：
I love SVG
复制代码
旋转的文本:transform="rotate(30 20,40)"
I love SVG
复制代码
11、svg的stroke属性
stroke，定义颜色。
stroke-width，定义宽度。
stroke-linecap，有 butt、round、square 三种值。
stroke-dasharray，定义虚线。使用特殊的规则。
12、svg滤镜
1、SVG滤镜用来增加对SVG图形的特殊效果。
2、两个标签： 和
3、滤镜，表示一个规则，让你的图形按照你想要的规则展示出来！
4、filter 标签，用来定义一个svg滤镜！
5、所有的svg滤镜，都应该放到defs标签中！
基本示例：
复制代码
说明：
feGaussianBlur，表示定义图形的模糊效果。
in="SourceGraphic"，表示这个部分由整个图像创建效果。
stdDeviation，定义了模糊量，表示在原本图形上的伸缩效果。
fitler属性，把当前图形，链接到定义的规则上面。
filter标签的 x 属性：表示横向的压缩。y 属性：表示纵向的压缩。
13、svg阴影——feOffset
feOffset标签，表示形成一个偏移的图形。
feBlend标签，表示与图像相结合的滤镜。或者可以理解为，生成一个原本的图像。
feColorMatrix标签，给元素渲染颜色。
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
复制代码
14、svg线性渐变——linearGradient
linearGradient，表示线性渐变。需要设置四个值：x1、y1、x2、y2。
x表示横向渐变的过程，y表示纵向渐变的过程。
内部，需要两个stop标签，需要设置颜色(style)和位置(offset)。
复制代码
15、svg放射性渐变——radialGradient
radialGradient，定义的是由中心到四周的渐变。
CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆。
复制代码
16、svg参考手册
17、思考和总结(现实应用场景)
SVG绘图，能够绘制一些简单的、有一定规则的图形、并且给这些图形、文本一些滤镜特效。
关于SVG 和 Canvas 的区别。
1、SVG 不能绘制图片，而 canvas 可以。SVG是通过 XML 绘制，而Canvas通过 js 绘制
2、Canvas绘制的方式，是通过 js 逐像素渲染的。也就是说，它绘制一个复杂的图形和一个简单的图形的性能是差不多的。
SVG 是通过 XML 的方式渲染。它的本质是DOM，而复杂的图形，就会降低其渲染性能。
3、Canvas 是依赖分辨率，是一种标量图。所以在放缩的时候，存在失真的问题。
SVG 绘制的时候，不依赖分辨率，是一种矢量图。所以当SVG放缩的时候，不会使得图像失真。
4、SVG 适合带有大型渲染区域的应用程序：比如谷歌地图、百度地图。
Canvas 适合对象密集型的游戏应用场景。
