-
SVG 作为标签使用(), 可以使用 css 或 js 通过class 和 id 控制.
SVG作为图像使用：
img标签 和css背景图SVG作为应用程序:
object标签 和iframe标签 -
坐标系统
width、heightviewport 视口大小viewBox可视区：
min-x左min-y上width宽height高preserveAspectRatio：控制缩放图形相对视口的对齐方式
align：x 轴 xMin 左 xMid 中 xMax 右。 y 轴 yMin 上 yMid 中 yMax 下 。9种组合
meetOrSlice： meet 宽高比将会被保留，尽可能的放大填满 或 slice宽高比将会被保留，比例小的方向放大填满
设置 viewBox 和 preserveAspectRatio 控制 图形的位置
-
line 线 rect 矩形 circle 圆 ellipse 椭圆 polygon 多边形 polyline 折线 path 路径(直线 折线 二次贝塞尔曲线 三次贝塞尔曲线 圆弧)
-
SVG中，样式有4种加载方式
style属性 defs内部设置样式 css选择器来设置样式 属性的形式设置样式(优先级最低)g元素 元素的一个组合
use元素 把指定的代码块在指定的位置再画一遍。
xlink:href属性设置要复制的元素，和css选择器中的id选择器相似defs元素 用于定义复用的元素，在
defs内的元素并不会被显示，而是作为模板供其他地方使用image元素 xlink:href=“xxx” 用来加载一个完整的SVG文件 或 图片(相对链接 或 base64编码)
-
transform属性，控制图形的坐标变换。css3中变换是以元素的中心点变换，SVG中中的transform是相对于画布的左上角计算的translate 位移 rotate 旋转 scale缩放 matrix 矩阵变换
-
path命令是区分大小写的。大写表示绝对坐标，小写表示相对坐标m 移动 l 连接 v 垂直线 h 水平线 z 闭合 q 二次贝塞尔曲线 c 三次贝塞尔曲线 a 圆弧曲线
-
图案填充 patterns元素. 渐变色填充 linearGradient 元素 radialGradient 元素
fill="url(#xxx)"
-
文本
<text>元素在画布中创建文本，<tspan>元素进行多行文本创建，<textPath>xlink:href=“xxx” 让文本在指定的路径上排列示例：### 纵向文本 ### 设置一行文本不同样式(旋转并字间距不一样)
-
裁剪和蒙版
裁剪 使用
clipPath元素在defs中创建裁剪区域。区域内的部分显示，区域外的隐藏。style="clip-path: url(#xxx)"
使用
mask元素创建蒙版 蒙版*黑色代表不可见（opacity: 0）*白色代表可见（opacity: 100%）mask="url(#xxx)"
示例：图片渐变
-
滤镜使用
<filter>标签filter="url(#xxx)"
-
动画
1）
set实现延迟功能。在规定时间之后，修改某个属性的值。animate实现单属性的过渡动画。animateTransform用于实现transform变换动画。animateMotion实现路径动画，让SVG各个图形，沿着指定路径运动2）CSS操作SVG动画
#cir { fill: gold; } #cir:hover { fill: greenyellow; }3）路径描边动画
描边动画就是使用
stroke-dasharray和stroke-dashoffset属性来完成stroke-dasharray 定义 虚边总长路径的长度 stroke-dashoffset 控制虚边偏移量， 展示路径
GSAP 为 静态SVG添加动画，可以 绘制闪烁边框
5）形变动画，animate 控制 path 中的 d. begin="indefinite" 动画无限期等待, js dom元素.beginElement() 控制动画开始
