1. 简介
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟的标准。
特点
（1）SVG 图像可通过文本编辑器来创建和修改；
（2）SVG 图像可被搜索、索引、脚本化或压缩；
（3）SVG 是可伸缩的；
（4）SVG 图像可在任何的分辨率下被高质量地打印；
（5）SVG 可在图像质量不下降的情况下被放大；
1.1 使用方式
- SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作
<!DOCTYPE html> <html> <head></head> <body> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" > <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> </body> </html>
- SVG 代码写在一个独立文件中,用< img > < object > < embed > < iframe > 等标签插入网页
<img src="circle.svg"> <object id="object" data="circle.svg" type="image/svg+xml"></object> <embed id="embed" src="icon.svg" type="image/svg+xml"> <iframe id="iframe" src="icon.svg"></iframe>
- CSS 可使用 SVG 文件
.logo { background: url(icon.svg); }
- SVG 文件可转为 BASE64 编码，作为 Data URI 写入网页
<img src="data:image/svg+xml;base64,[data]">
1.2 坐标轴系统
SVG使用的坐标系统或者说网格系统：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
注意：这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。
1.3 颜色
RGB: 红色、绿色、蓝色，每个分量的取值范围[0, 255]，优点是显示器更容易解析。
HSL: 颜色h、饱和度s%、亮度l%，每个分量的取值范围分别是[0, 359], [0, 100%], [0, 100%],，其中，h=0表示红色， h=0表示120绿色，h=0表示240 蓝色。
2. 作用于 svg 标签的属性
2.1 viewport：
表示 svg 的可见区域的大小：width height，控制 svg 的宽度和高度；
2.2 viewBox：
定义用户视野的位置以及大小，即定义用来观察SVG视图一个矩形区域，
更形象的解释就是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示；
eg: viewBox =‘20 20 100 100’，前两个参数表示 viewBox 视野相对 svg 视图的 x y 坐标，后两个参数表示 viewBox 的大小;
与svg实际大小的关系如下：
如下图所示，用户可以看到的部分是蓝色的星星，而星星的另一侧是看不到的
viewBox 的使用案例：
第一步：绘制矩形
<svg width="200" height="200" style="border: 2px solid #58a"> <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect> </svg>
第二步：增加视野 viewBox viewBox=‘0 0 100 100’，相当于用户只能看到 SVG 视图中 viewBox 定义的区域，即下图红色框内区域：viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
<svg width="200" height="200" style="border: 2px solid #58a" viewBox='0 0 100 100'> <rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect> </svg>
最终效果图：
2.3 preserveAspectRatio
这个属性也是作用于 < svg > 元素上，且作用对象都是 viewBox；
属性值为空格分隔的两个值组合而成。
eg:
preserveAspectRatio="xMidYMid meet"
第一个值表示：viewBox 如何 viewPort 对齐；
第一个值又分为两个部分组成：前半部分表示 x 方向的对齐，后半部分表示 y 方向对齐。
xMaxYMax表示右-下
xMidYMid表示中-中
第二个值表示：如何维持高宽比（可以为空）;
图1：红色区域为不设置 preserveaspectRatio 时的可视区域；
图2: 采用与x轴左边对齐、与y轴上边缘对齐的方式，保持纵横比缩放；
图3：保持纵横比的同时，以比例小的方向即 x 轴等比放大，填充 svg 区域;
图4：preserveaspectRatio=“none”，变形充分适应svg;
3. 作用于 svg 内部元素的属性
- svg 支持 css 选择器给元素添加样式
/* 定义样式 */ .rectStyle { fill: yellow; } <svg width="200" height="200"> <rect class="rectStyle" width="20" height="20"></rect> </svg>
- 直接在元素中设置样式
<svg width="200" height="200"> <rect width="20" height="20" fill="yellow"></rect> </svg>
- 写成style
<svg width="200" height="200"> <rect style="fill: yellow;" width="20" height="20"></rect> </svg>
3.1 填充
fill：定义填充颜色和文字颜色； fill-opacity：定义填充颜色的透明度； fill-rule：指定填充规则，符合填充规则才可被填充； 有效值: nonzero | evenodd | inherit 默认值: nonzero 应用于: shape 形状类元素 和 文字内容类元素 可继承: 是 比例: 无 媒体: 可见 动画可用: 是
nonzero
字面意思是非零。按照规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
下图演示了 nonzero 规则:
evenodd
字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
下图演示了evenodd 规则:
3.2 边框
stroke：边框颜色； stroke-width：边框宽度； stroke-opacity：边框透明，取值[0,1]； stroke-linecap：单条线端点样式，一般应用于直线或者路径，取值：[ butt | square | round ]，分别是对接、方形和圆形
stroke-dasharray：虚线边框，可以设置每段虚线的长度和间隔，之间使用逗号分隔或者空格分隔， 如：stroke-dasharray="10, 5, 5, 10"
stroke-dashoffset：设置虚线描边偏移量，使图案向前移动
<svg width="200" height="200" viewBox='0 0 300 300'> <line x1="20" y1="20" x2="120" y2="20" stroke="red" stroke-width="5" stroke-linecap="butt" stroke-dasharray="20 5 5 10"> </line> <line x1="20" y1="60" x2="120" y2="60" stroke="red" stroke-width="5" stroke-linecap="butt" stroke-dasharray="20 5 5 10" stroke-dashoffset="10"> </line> </svg>
虚线的样式为 20 5 5 10，偏移量为10，根据下图可发现第二个虚线，整体向前移动了10个单位
sroke-linejoin：两条线段之间衔接点的样式，取值：[ miter | round | bevel ]
分别是尖角(图左一)、圆角(图左二) 和 斜角(图左三)
sroke-miterlimit：默认值4， 当 miterLength / stroke-width < stroke-miterlimit 时，stroke-linejoin 值会变成换成 bevel 斜角
如下图中，stroke-width 为15，根据计算公式，miterLength ／ stroke-width 约等于5.2，即当 stroke-miterlimit 小于6时，stroke-linejoin 值会变成 bevel 斜角。
3.3 透明度
opacity：定义整个图形的透明度
3.4 字体
font-size：字体大小； font-family：字体系列的名称； font-weight：字体粗细； font-style：字体样式，斜体和正常； text-decoration：下划线样式； text-anchor：设置文本的排列属性，属性值 [start | middle | end | inherit]； 如：middle表示，将文字定位原点移动至文字中心。
3.5 变换
transform：同 css，默认是左上角为旋转中心，如：transform="rotate(30)"； transform-origin：同css，设置旋转的操作中心； rotate：设置文字元素的旋转角度，正值为顺时针旋转，
注意区分 rotate 和 transform 中的 rotate，如 rotate=“30”，而 transform 中的 rotate 是对整个元素进行旋转操作。
<svg width="200" height="200"> <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20"> 示例文字1 </text> </svg> <svg width="200" height="200"> <text x="10" y="10" dx="10" dy="10" textLength="100" transform="rotate(20)"> 示例文字2 </text> </svg>
