SVG

• 可伸缩矢量图形(Scalable Vector Graphics)
• 使用 XML 格式定义图像
• 是w3c的标准

初始化一个SVG

<!-- 画一个 X 号 -->
<style>
  line{
    stroke:#333;
    stroke-width:8;
  }
</style>
<svg width="100" height="100" viewBox="0 0 100 100">
  <line  x1="0" y1="0" x2="100" y2="100"></line>
  <line  x1="0" y1="100" x2="100" y2="0"></line>
</svg>

SVG元素通用属性（也可以在CSS中使用）

stroke

• stroke 路径颜色，取值为none则没有
• stroke-width 路径宽度
• stroke-linecap 路径末端的形状
  • butt: 精准切断，不会超过终点
  • round: 圆点
  • butt: 方点
• stroke-linejoin 路径在拐点时怎样呈现
  • miter: 尖点
  • round: 圆点
  • miter: 平点
• stroke-miterlimit 如果stroke-linejoin设置为miter，可以设置拐点延申的距离，取值为数字
• stroke-dasharray 绘制以虚线呈现的路径
  • 取值如："10 5"，10表示虚线部分的宽度为10像素，5表示虚线之间的间隔为5像素
  • 取值如："10 5 5 5"，表示以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，然后是5像素的另一间距。然后重复该模式。
• stroke-dashoffset 平移虚线开始位置
  • 取值为数字，正数表示向左平移，负数表示向右平移
• stroke-opacity 设置路径的不透明度
  • 取值 0~1，0为完全透明，1为完全不透明

fill

• fill 填充色，取值为none则没有
• fill-opacity 设置填充颜色的不透明度
• fill-rule 指定一种算法判断区域是否属于该图形“内部”(规定一个图形的区域)
  • nonzero 字面意思是“非零”
    • 判断规则：要判断一个区域是否在图形内，在该区域内选取一个点做任意方向的一条射线。从0开始算起，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
  • evenodd 字面意思是“奇偶”
    • 判断规则：要判断一个区域是否在图形内，在该区域内选取一个点做任意方向的一条射线。然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。

transform

• 转换，取值为转换函数，常用函数有：
  • translate(x,[y]) 移动
    • x 必传，x轴方向移动的距离
    • y 可选，y轴方向移动的距离，不传视为0
  • rotate(a,[x,y]) 旋转
    • a 必传，形状顺时针旋转的角度，负值为逆时针
    • x 旋转点的x坐标，如果旋转点未指定，默认以当前坐标系的原点
    • y 旋转点的y坐标
  • scale(x,[y]) 缩放
    • x 必传，x轴缩放的倍数
    • y y轴缩放的倍数，如果不传按x轴缩放的倍数
    • scale会同时缩放原形状坐标和笔触，设置成负值还可以得到原形状的镜像
  • skewX(a) x轴倾斜
    • a 倾斜的角度
  • skewY(a) y轴倾斜
    • a 倾斜的角度
  • matrix(a,b,c,d,e,f) 矩阵
    • [a c e]
    • [b d f]
    • 计算规则：假设原形状里的一个点原来的坐标为(oldX,oldY)，转换后的坐标为(newX,newY)
    • newX = a * oldX + c * oldY + e
    • newY = b * oldX + d * oldY + f
  • 组合转换
    • 多个变换函数以空格分开，注意转换的顺序
    • 如：transform="translate(50,0) rotate(30)"

SVG元素

• 坐标从元素最左上角开始算起，向右为x正方向，向下为y轴正方向

svg

• 定义svg的区域，属性：
  • xmlns 安装svg，在HTML5中使用可以不写
    • 取值一般为: "http://www.w3.org/2000/svg"
  • xmlns:xlink 命名空间，在HTML5中使用可以不写
    • 取值一般为: "http://www.w3.org/1999/xlink"
  • width svg元素的宽度(px,值为数字,不用写单位)，默认为100%
  • height svg元素的高度
  • viewBox svg元素的区域，重新定义内部元素的单位的大小，取值：
    • "x0 y0 width height"
      • x0:开始点x的值(正数为向左平移，负数向右平移)
      • y0:开始点y的值(正数为向上平移，负数向下平移)
      • width:规定svg的宽度(坐标系的长度，不一定等于实际长度)
      • height:规定svg的高度
  • preserveAspectRatio 设置viewBox与svg实际大小的对齐和显示方式，取值:
    • "align type"
      • align: viewBox与svg的对齐方式，由两个部分字符串拼接组成，第一个部分是 x 轴的对齐方式，第二个部分是 y 轴对齐方式。实际生效的只会有一种，因为有一项必定会填满整个svg
        • 如：xMidYMid 表示x轴居中对齐，y轴居中对齐。对齐的方式取值有三种，分别是：
          • Max 用于x轴，就是最大值与svg最右侧对齐（居右）。用于y轴，就是最大值与svg最底部对齐（居下）
          • Mid 居中对齐
          • Min 用于x轴，就是最小值与svg最左侧对齐（居左）。用于y轴，就是最小值与svg最上部对齐（居上）
      • type: 设置viewBox在svg里显示的方式，取值：
        • meet 按照比例以viewBox里 宽 和 高 中更长的为基准填满svg，会缩放viewBox
        • slice 按照比例以viewBox里 宽 和 高 中更短的为基准填满svg，会切掉多出的部分
        • none 缩放viewBox以适合svg的大小，居中对齐。此时第一个参数(align)将失效

line

• 直线，属性：
  • x1 线条起始点x轴坐标
  • y1 线条起始点y轴坐标
  • x2 线条终点x轴坐标
  • y2 线条终点y轴坐标

rect

• 矩形，属性：
  • x 开始点x坐标
  • y 开始点y坐标
  • rx 设置圆角，x舍入的值
  • ry 设置圆角，y舍入的值，一般rx和ry设置的值一样，如果只设置了rx，则ry默认和rx一样
  • width 矩形的宽度
  • height 矩形的高度

circle

• 圆形，属性：
  • cx 圆心的x坐标，默认0
  • cy 圆心的y坐标，默认0
  • r 园的半径

ellipse

• 椭圆，属性：
  • cx 椭圆中心的x坐标，默认0
  • cy 椭圆中心的y坐标，默认0
  • rx 水平半径
  • ry 垂直半径

polygon

• 多边形，属性：
  • points 定义多边形的各个点
    • 取值："x1,y1 x2,y2 ... xn,yn"
      • x1:第一个点的x坐标
      • y1:第一个点的y坐标
      • yn:最后一个点的x坐标
      • yn:最后一个点的y坐标
• CSS属性 fill-rule 在这里会用到

polyline

• 折线，属性：
  • points 定义折线的各个点，取值同 polygon ,但是不会封闭图形

path

<!-- 画一个圆 -->
<path d="
  M 50 100
  A 50 50 0 1 1 50 0
  A 50 50 0 1 1 50 100
"></path>

• 路径，属性：
  • d 描述怎样绘制路径，后面的每一个字母表示绘制一个动作，后面跟着坐标

d 的常见取值：

• 以下字母同时支持小写
• 大写表示绝对定位，以最左上角为0点
• 小写表示相对定位，以上一个点为0点

M(m)

• moveto 移动点(不会留下路径)，常用于确定起始点
• M x y
  • x:x轴坐标
  • y:y轴坐标

L(l)

• lineto 画一条直线到一个点
• L x y
  • x:x轴坐标
  • y:y轴坐标

H(h)

• horizontal lineto 水平画一条直线到一个点
• H x
  • x:x轴坐标

V(v)

• vertical lineto 竖直画一条直线到一个点
• V y
  • y:y轴坐标

A(a)

• elliptical arc 画一段弧
• A rx ry rotate arc sweep x y
  • rx: x轴半径
  • ry: y轴半径
  • rotate: 相对于中心点顺时针旋转的角度
  • arc: 取值:0表示弧线小于180度,1表示弧线大于180度
  • sweep: 取值:0表示逆时针方向,1表示顺时针方向
  • x: 终点x轴坐标
  • y: 终点y轴坐标

Q(q)

• quadratic Bézier curve 二次贝塞尔曲线
• Q cx cy x y
  • cx: 曲线控制点x轴坐标
  • cy: 曲线控制点y轴坐标
  • x: 曲线终点x轴坐标
  • y: 曲线终点y轴坐标

T(t)

• smooth quadratic Bézier curveto 延申二次贝塞尔曲线
• T x y
  • x: 曲线终点x轴坐标
  • y: 曲线终点y轴坐标
• 跟在 Q 命令后面使用，假设 Q 命令生成了一条二次贝塞尔曲线 q ，则 T 命令就是在 q 的终点再画一条到 (x,y) 的二次贝塞尔曲线。曲线的控制点是 q 的控制点在 q 终点的中心对称点

C(c)

• curveto 三次贝塞尔曲线
• C cx1 cy1 cx2 cy2 x y
  • cx1: 开始控制点x轴坐标
  • cy1: 开始控制点y轴坐标
  • cx2: 终点控制点x轴坐标
  • cy2: 终点控制点y轴坐标
  • x: 终点x轴坐标
  • y: 终点y轴坐标

S(s)

• smooth curveto 延申三次贝塞尔曲线
• S cx2 cy2 x y
  • cx2: 终点控制点x轴坐标
  • cy2: 终点控制点y轴坐标
  • x: 终点x轴坐标
  • y: 终点y轴坐标
• 跟在 C 命令后面使用，假设 C 命令生成了一条三次贝塞尔曲线 c ，则 S 命令就是在 c 的终点再画一条三次贝塞尔曲线。曲线的终点控制点是 (cx2,cy2)，开始控制点是 c 的终点控制点在 c 终点的中心对称点

Z(z)

• closepath 闭合路径，大写和小写没有区别

g

• 用于将svg形状分组在一起，添加到g元素的属性和样式会被其所有的子元素继承
• 此外，g 元素也可以放在 defs 中定义复杂的对象，之后可以通过<use>元素来引用它们

defs

• 存储形状，便于这些形状的复用
• 在 defs 中定义的形状不会显示在svg图像中，只有被引入才会显示

marker

<!-- 画一个箭头 -->
<style>
  rect,polygon{
    stroke:none;
    fill:#333;
  }
  path{
    stroke:#333;
    stroke-width:2px;
    marker-start: url(#squ);
    marker-end: url(#arr);
  }
</style>
<svg viewBox="0 0 100 100">
  <defs>
    <marker id="squ" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
      <rect x="1" y="1" width="6" height="6"></rect>
    </marker>
    <marker id="arr" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
      <polygon points="4,1 1,7 7,7"></polygon>
    </marker>
  </defs>
  <path d="M 10 10 L 60 60"></path>
</svg>

• 标记
• 在路径的开始、中间和结尾显示标记，在特定的元素(path,line,polyline,polygon)上可以使用
  • id: 用于从其它元素引用此标记
  • markerWidth: 定义标记的宽
  • markerHeight: 定义标记的高
  • refX: 定义参考点的x轴坐标
  • refY: 定义参考点的y轴坐标
    • 参考点是使用标记时定位在路径处的点，此处定义圆心为参考点。如果不设置，将以左上角作为参考点
  • orient: 旋转角度。一般取值为 auto ，可以根据路径的方向改变标记的方向，如箭头的指向
• 在路径上引用标记
  • marker-start: 将标记分配给路径的起点，取值：url(#标记id)
  • marker-mid: 将标记分配给路径的拐点，取值：url(#标记id)
  • marker-end: 将标记分配给路径的终点，取值：url(#标记id)

symbol

• 定义可重复使用的符号
• 在 symbol 中的形状只有被引用才会显示
• 与在 defs 元素内使用 g 元素相比，symbol 元素还具有 viewBox 和 prepareAspectRatio 属性

<!-- 画一个圆 -->
<svg width="100" height="100">
  <symbol id="circle">
    <circle cx="50" cy="50" r="50" />
  </symbol>
  <use xlink:href="#circle" x="0" y="0" />
</svg>

use

• 可以引用SVG文档中其他位置的形状
• 被引用的形状以(0,0)点为开始点
  • xlink 该属性指定被引用元素的id，属性值为"#"加上id
  • x 形状开始点x坐标
  • y 形状开始点y坐标

text

• 文本，属性：
  • x 开始点x轴坐标
  • y 开始点y轴坐标

tspan

• 用于绘制多行文本，用在text标签内，可以相对上一个tspan位置定位文本
• 多行tspan标签如果不设置属性，本身不会换行，没有特殊样式。属性：
  • dx: 相对于上一个tspan水平平移，如：
    • dx="20" 向右平移20
    • dx="2 4 8" 第一个字符向右平移2，第二个字符向右平移4(相对于上一个tspan，而不是自身标签上一个字符)，第三个平移8
  • dy: 相对于上一个tspan垂直平移，用法同dx
  • x: 开始点x轴坐标
  • y: 开始点y轴坐标

<!-- 写三行文本 -->
<text y="20">
  <tspan x="10">hello world 0</tspan>
  <tspan x="10" dy="20">hello world 1</tspan>
  <tspan x="10" dy="20">hello world 2</tspan>
<text>

textPath

<defs>
  <path id="textPath" d="M 20 20 A 50 50 0 0 0 120 20">
</defs>
<text>
  <textPath xlink:href="#textPath">hello world hello world<textPath>
</text>

• 用于沿着一条路径布置文本，属性：
  • xlink:href 引用路径的id

a

<a xlink:href="https://www.baidu.com">
  <text x="20" y="20">百度</text>
</a>

• 在SVG图像中创建一个超链接，属性：
  • xlink:href 超链接地址
  • xlink:show 设置链接是在新窗口打开还是替换原来的页面，取值：
    • new 在新的窗口
    • replace 替换原来的页面
  • target 设置链接是在新窗口打开还是替换原来的页面。以浏览器窗口，而不iframe。
    • _top 在原来的窗口
    • _blank 在新的窗口

image

• 嵌入图像，支持jpg、png其他svg格式
  • xlink:href 定义图像的链接
  • x 图像开始的x轴坐标
  • y 图像开始的y轴坐标
  • width 图像的宽度
  • height 图像的高度

switch

• switch元素会对其直接子元素上的 systemLanguage 属性进行判断，呈现第一个判断为true的子元素，其他子元素将不显示

<switch>
  <text systemLanguage="en-us">Howdy</text>
  <text systemLanguage="en">Hello</text>
  <text systemLanguage="zh">你好</text>
</switch>

pattern

• pattern元素可以用来定义一个图形，对另一个图形进行描边或填充
  • id 定义该元素的唯一标识
  • patternUnits 设置该元素的 x y width height 属性所代表的意义
    • "objectBoundingBox" 默认值，表示占填充的容器的比例，如：0.1 ,表示10%
    • "userSpaceOnUse" 表示按照当前SVG坐标系统的值
  • patternContentUnits 设置pattern元素内图案的大小代表的意义
    • "objectBoundingBox" 同 patternUnits
    • "userSpaceOnUse" 默认值，同 patternUnits
  • x 元素内图像开始的x轴的值
  • y 元素内图像开始的y轴的值
  • width 元素的宽
  • height 元素的高

<!-- 填充一个矩形 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <pattern id="rect" width="0.2" height="0.2" patternContentUnits="objectBoundingBox">
    <rect width="0.1" height="0.1" />
  </pattern>
  <rect width="100" height="100" fill="url(#rect)" stroke-width="1" stroke="#ccc" />
</svg>

clipPath

• 根据特定路径剪切SVG形状
  • id 定义该元素的唯一标识
  • clipPathUnits 同 pattern 的 patternContentUnits 属性，默认值是 "userSpaceOnUse"
• 在需要裁剪的形状中使用 clip-path 属性（也可以在样式中使用）进行裁剪

<!-- 裁剪一个圆 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <clippath id="rect">
    <rect x="50" y="50" width="50" height="50" />
  </clippath>
  <circle cx="50" cy="50" r="50" style="fill:#f00;clip-path:url(#rect);"/>
</svg>

mask

• 蒙版，可以确定SVG形状哪部分可见，以及透明度。蒙版可以视为剪切路径的更高级版本
• 蒙版内形状填充的颜色定义蒙版的不透明度。越接近 #ffffff 颜色越深，越不透明。越接近 #000000 颜色越浅，越透明
  • maskUnits 同 pattern 的 patternUnits 属性，默认值为 "objectBoundingBox"
  • x 蒙版内图像开始的x轴的值
  • y 蒙版内图像开始的y轴的值
  • width 蒙版的宽
  • height 蒙版的高

<!-- 在蒙版中使用渐变和填充 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定义渐变 -->
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
        <stop offset="100%" stop-color="#000000" stop-opacity="1" />
    </linearGradient>
    <!-- 定义填充 -->
    <pattern id="pattern" width="0.1" height="0.1">
      <circle cx="5" cy="5" r="5" style="fill:#ff0000;" />
    </pattern>
    <!-- 定义蒙版 -->
    <mask id="mask" x="0" y="0" width="100" height="100" >
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient);" />
    </mask>
  </defs>
  <text x="0" y="50" style="stroke:none;fill:#000000;">
    Hello world!
  </text>
  <rect x="0" y="0" width="100" height="100" style="stroke:none;fill:url(#pattern);mask:url(#mask);" />
</svg>

filter

• 滤镜需要输入（源），并对其应用滤镜效果。滤镜的输入可以是源图形（表示RGB颜色）、图形的alpha通道或者其它滤镜的输出。
• 内部元素通用属性
  • in 定义滤镜的输入，取值通常为
    • "SourceGraphic" 源图形
    • "SourceAlpha" 源图形的alpha通道
    • 其他滤镜的 result 属性的值
  • result 定义滤镜的输出
• filter 滤镜的容器，滤镜的尺寸是相对于输入的形状计算。由于某些滤镜的输出通常要比输入大（如模糊），因此x和y的值通常要使用负数
  • x 定义滤镜开始点的x轴坐标
  • y 定义滤镜开始点的y轴坐标
  • width 滤镜的宽
  • height 滤镜的高
  • id 定义滤镜的唯一标识

feGaussianBlur

• 高斯模糊滤镜
  • stdDevation 设置图形模糊的多少。取值为数字，越大模糊度越高。滤镜最好比源图形边缘多出该值的两倍

<!-- 使用高斯模糊滤镜 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定义滤镜 -->
    <filter id="filter" x="-10" y="-10" width="100" height="100">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feOffset

• 偏移滤镜
• dx 向x轴平移的量
• dy 向y轴平移的量

<!-- 使用偏移滤镜 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定义滤镜 -->
    <filter id="filter" x="0" y="0" width="50" height="50">
      <feOffset in="SourceGraphic" dx="30" dy="10" />
    </filter>
  </defs>
  <rect x="10" y="10" width="50" height="50" style="stroke:#666;fill:none;filter:url(#filter);" />
  <rect x="10" y="10" width="50" height="50" style="stroke:#666;fill:none;" />
</svg>

feColorMatrix

• 颜色矩阵滤镜

  • type 指定矩阵运算的类型。一般取值"matrix"，表示提供完整的5x4的矩阵
  • values 设置矩阵的值，每个像素原来的颜色值[R,G,B,A]将与矩阵相乘转换成新的颜色[R',G',B',A']

  r1 r2 r3 r4 r5
  
  g1 g2 g3 g4 g5
  
  b1 b2 b3 b4 b5
  
  a1 a2 a3 a4 a5

  R、G、B、A表示原来的颜色值，R'、G'、B'、A'表示转换后的颜色值
  
  R' = r1*R + r2*G + r3*B + r4*A + r5
  
  G' = g1*R + g2*G + g3*B + g4*A + g5
  
  B' = b1*R + b2*G + b3*B + b4*A + b5
  
  A' = a1*R + a2*G + a3*B + a4*A + a5

<!-- 使用颜色矩阵滤镜 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <!-- 定义滤镜 -->
    <filter id="filter" x="0" y="0" width="50" height="50">
      <feColorMatrix in="SourceGraphic" type="matrix" values="
        0.4 0 0 0 0
        0.2 1 0 0 0
        0.8 0 1 0 0
        0 0 0 1 0
      " />
    </filter>
  </defs>
  <rect x="10" y="10" width="50" height="50" style="stroke:none;fill:#ff0000;" />
  <rect x="40" y="40" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feMerge

• 组合滤镜，将不同的效果组合在一起同时作用于图形

<!-- 使用组合滤镜实现阴影效果 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="filter" x="-10" y="-10" width="70" height="70">
      <!-- 偏移滤镜（feOffset）作用于形状的Alpha通道 -->
      <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
      <!-- 高斯模糊（feGaussianBlur）作用于偏移滤镜效果的输出 -->
      <feGaussianBlur in="offset" stdDeviation="3"  result="blur" />
      <!-- 这里是将原始图形和模糊滤镜的输出组合在一起 -->
      <feMerge>
        <!-- 模糊滤镜的输出 -->
        <feMergeNode in="blur" />
        <!-- 原图形，后面的输入显示在前面的顶部，形状看起来像带有阴影 -->
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

feBlend

• 混合滤镜，可以将多个滤镜混合为一个
  • in 滤镜的第一个输入源
  • in2 滤镜的第二个输入源

<!-- 使用组合滤镜实现阴影效果 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <filter id="filter" x="-10" y="-10" width="70" height="70">
      <!-- 偏移滤镜（feOffset）作用于形状的Alpha通道 -->
      <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
      <!-- 高斯模糊（feGaussianBlur）作用于偏移滤镜效果的输出 -->
      <feGaussianBlur in="offset" stdDeviation="3"  result="blur" />
      <!-- 这里是将原始图形和模糊滤镜的输出混合在一起 -->
      <feBlend  in="SourceGraphic" in2="blur" />
    </filter>
  </defs>
  <rect x="20" y="20" width="50" height="50" style="stroke:none;fill:#ff0000;filter:url(#filter);" />
</svg>

linearGradient

• 线性渐变，可以定义从一种颜色到另一种颜色的平滑过渡。有两种类型的渐变：线性渐变和径向渐变
  • x1 x2 定义渐变梯度向量的起点坐标，默认使用百分比
  • x2 y2 定义渐变梯度向量的终点坐标
  • spreadMethod 定义渐变如何在形状中扩展，取值有三种：
    • "pad" 填充，默认，在渐变的第一个颜色和最后一个颜色之外进行纯色填充
    • "reflect" 反射，在渐变颜色之外镜像延申渐变
    • "repeat" 重复，在渐变颜色之外重复渐变
  • gradientTransform 给渐变添加变换，取值为转换函数<transform-list>，同transform
  • gradientUnits 定义x1,y1,x2,y2的取值的类型
    • "objectBoundingBox" 默认，百分比
    • "userSpaceOnUse" 按坐标系的值计算

stop

• linearGradient元素的子元素，定义在渐变节点上的一种颜色
  • offset 该颜色点在渐变中的位置（百分比）
  • stop-color 该点的颜色
  • stop-opacity 该点的透明度

<!-- 实现渐变效果 -->
<svg width="400" height="100" viewBox="0 0 400 100">
  <defs>
    <linearGradient x1="0.3" y1="0.5" x2="0.7" y2="0.5" spreadMethod="reflect" id="gradient" gradientTransform="rotate(15)">
      <stop offset="0%" stop-color="gold" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <rect x="20" y="20" width="360" height="60" fill="url(#gradient)"/>
</svg>

动画元素

时间单位

• 时间单位通常用在begin、dur和end等动画的属性上
• 可以指定数字加时间单位，如 5s 表示5秒

• 也可以是包含小时、分钟和秒的指定时间格式(hh:mm:ss)
  • 如："1:30:45" 表示1小时30分45秒

动画属性

• attributeName 要改变的属性名
• additive 将相同属性的动画的改变值叠加起来，上一个动画的终点值作为下一个动画的起始点
  • "replace" 默认，重新开始
  • "sum" 叠加
• accumulate 相同属性的动画，下一个动画执行时保留上一动画的终点值
  • "none" 默认，不叠加
  • "sum" 叠加
• calcMode 控制动画运行的速度
  • "discrete" 离散，from值直接跳到to值
  • "linear" 线性，默认值（animateMotion元素除外）
    • 如果没指定values或keyTimes等属性时，动画从头到尾的速率都是一致的
  • "paced" 步调，动画从头到尾的速率都是一致的（animateMotion该属性的默认值）
    • 忽略keyTimes、keySplines和values(不均匀阶段)属性，dur为indefinite也会被忽略
  • "spline" 使用贝塞尔曲线，spline的时间点由keyTimes属性定义，控制点由keySplines定义
• values 设置动画各个阶段的属性值
  • 取值为分号隔开一组值，如："a;b;c;d"。如果设置了该属性，将忽略元素上from、to和by属性
• keyTimes 定义动画的时间点，取值同values类似
  • 值的数目要和values对应
  • 第一个数字是0，最后一个是1，每个连续的值必须比它前面的值大或者相等
• keySplines 与keyTimes相关联的一组贝塞尔控制点，只有calcMode="spline"时这个参数才有效
  • 总比keyTimes少一个控制点，控制点之间由分号隔开。
  • 每个控制点由4个浮点值组成，值范围0~1，由空格隔开
  • 如果值不合法或者个数不对，则没有动画效果
  • 如："0.5 0 0.5 1"，一个控制点，先加速再减速
• from 动画开始时属性的值
• to 动画结束时属性的值
• by 动画过程属性值变化的量
• begin 动画执行等待的时间，取值有多种形式
  • 时间值 如："6s"
  • 一对时间值，分号隔开 如："3s,6s"，表示3s时执行一次，6s时再执行一次
  • syncbase-value 用法：元素的id.begin/end +/- 时间值
  • event-value 用法：元素的id.事件类型 +/- 时间值
  • repeat-value 用法：元素的id.repeat(整数) +/- 时间值
• end 动画在多长时间后结束，取值为时间值
• dur 动画持续的时间，取值常规为时间值。或者"indefinite"，表示时间无限，动画不执行
• min 动画最少执行多长时间，如果end值<min值，以min的值为准
• max 动画最多执行的时长，如果end值>max值，以max的值为准
• restart 控制动画重新执行（很多动画触发可能和事件相关）
  • "always" 默认，总是可以重复
  • "whenNotActive" 动画正在进行的时候，不能重启动画
  • "never" 只能执行一次
• repeatCount 动画执行的次数
  • 取值可以是合法数值或者"indefinite"（无限循环）
• repeatDur 动画重复的总时长
  • 取值可以是普通时间值或者"indefinite"（无限循环）
• fill 定义动画执行结束的状态
  • "remove" 默认值，动画结束后回到开始的位置
  • "freeze" 冻结，动画结束后冻结在结束时的位置

<!-- 对additive和accumulate的理解 -->
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 使用additive="sum" -->
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" additive="sum" values="0;100" dur="3s"/>
    <animate attributeName="x" additive="sum" values="0;200" dur="3s"/>
  </rect>
  <!-- 实际效果是图像在3s内，形状移动了300 -->
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 使用accumulate="sum" -->
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" accumulate="sum" values="0;100" dur="3s"/>
    <animate attributeName="x" accumulate="sum" to="200" dur="3s"/>
  </rect>
  <!-- 实际效果是图像在3s内，形状移动了200 -->
</svg>

<!-- begin特殊取值举例 -->
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 上一个动画执行结束，下一个动画开始执行 -->
  <rect width="100" height="100" fill="#f00">
    <animate id="syncbase" attributeName="x" values="0;300" dur="3s" fill="freeze"/>
    <animate attributeName="fill" values="#f5222d;#1890ff" begin="syncbase.end" dur="1s" fill="freeze"/>
  </rect>
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 点击圆后，延时500ms执行动画 -->
  <circle id="circle" cx="50" cy="50" r="50" fill="#f5222d"></circle>
  <rect x="100" width="100" height="100" fill="#f5222d">
    <animate attributeName="x" values="100;400" begin="circle.click+500ms" dur="3s" fill="freeze"/>
  </rect>
</svg>
<svg width="500" height="100" viewBox="0 0 500 100">
  <!-- 第一个动画执行了2遍之后，执行第二个动画 -->
  <rect width="100" height="100" fill="#f00">
    <animate id="repeat" attributeName="x" values="0;300" dur="3s" repeatCount="indefinite"/>
    <animate attributeName="fill" values="#f5222d;#1890ff" begin="repeat.repeat(2)" dur="1s" fill="freeze"/>
  </rect>
</svg>

set

• 经过一段时间后改变属性

<svg width="400" height="100" viewBox="0 0 400 100">
  <circle cx="50" cy="50" r="25" stroke="none" fill="cyan">
    <set attributeName="r" to="50" begin="2s"/>
  </circle>
</svg>

animate

• 为形状设置动画

<svg width="500" height="100" viewBox="0 0 500 100">
  <rect width="100" height="100" fill="#f00">
    <animate attributeName="x" from="0" to="400" begin="0" dur="3s"/>
  </rect>
</svg>

animateTransform

• 给transform变换添加动画效果
  • type transform的类型

<svg width="500" height="100" viewBox="0 0 500 100">
  <rect width="50" height="50" fill="#f00">
    <animateTransform attributeName="transform" type="scale" values="1;2" dur="3s" fill="freeze"/>
  </rect>
</svg>

animateMotion

• 让SVG图形沿着特定的path路径运动
  • path 定义移动的路径，同path元素的d属性
  • rotate 指定图形在路径上移动时如何旋转，取值：
    • 数值，指定一个恒定的旋转度数，默认值为0
    • "auto" 指向运动的方向
    • "auto-reverse" 指向运动的反方向
  • keyPoints 定义在每个时间段移动的进度
    • 取值为一组数值，最小为0，最大为1。每一个值都要比上一个值大。与keyTimes对应

<svg viewBox="0 0 200 100">
  <path fill="none" stroke="#95de64" d="
    M 20 50
    C 20 -50 180 150 180 50 
    C 180 -50 20 150 20 50
    Z
  "/>
  <rect x="-5" y="-2" width="10" height="4" fill="#f5222d">
    <animateMotion rotate="auto" keyPoints="0;0.5;1" keyTimes="0;0.3;1" dur="6s" calcMode="linear" repeatCount="indefinite" path="
      M 20 50
      C 20 -50 180 150 180 50
      C 180 -50 20 150 20 50
      Z
    "/>
  </rect>
</svg>

• 喜欢的话就点赞关注吧