梦入琼楼寒有月，行过石树冻无烟

SVG SMIL Animations

2022-04-21

SVG

SVG 是可伸缩矢量图的缩写（Scalable Vector Graphics），是另一种图形格式，通过XML制定行组行，最后由SVG查看器来呈现XML，目前大多数浏览器都可以支持显示SVG。本文中的 Animations在SVG里面，主要用于呈现 SVG 动画效果，而SVG可以实现如下效果：

  1. 基本行组行
  2. 路径形状
  3. 文本
  4. 图片
  5. 分层和透明度
  6. 旋转
  7. 渐变
  8. 链接
  9. 动画制作
  10. 数据用例等

就比如我们来编写一个简单的svg图像：
效果图

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="200" width="100" style="stroke: red; fill:royalblue"></rect>
</svg>

svg 图像可以是非常简单也可以是非常复杂，这都将取决与项目的需要来进行改变。就如上述code 中的实例可以看出，我们首先使用了svg标签，之后通过写入rect标签来画一个矩形，设置x,y左边以及大小和轮廓以及填充颜色等。

浏览器使用

在浏览器中我们可以通过使用iframe来引入svg img，通常像是ps、ai等专业级的设计工具都支持导出svg格式：

1
<iframe src="img.svg">

在编写svg的是时候需要注意，所有图像的根元素都是以<svg>所开始的，通常格式为：

1
2
3
4
<svg xmlns =“ http://www.w3.org/2000/svg”
      xmlns：xlink =“ http://www.w3.org/1999/xlink”>
       <!-- code -->
</ svg>

svg 分组

svg中，可以通过使用 <g>元素来将svg形状分组在一起，分组后可将单个图形变成一个整体，因此我们可以使用：
分组后的图形整体移动

1
2
3
4
5
6
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="rotate(10 20 40)">
        <line x1="10" y1="10" x2="85" y2="10" style="stroke: royalblue;"></line>
        <rect x="10" y="20" height="20" width="40" style="stroke: royalblue;"></rect>
    </g>
</svg>

动画

动画

1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <rect x="10" y="20" height="200" width="100" style="stroke: royalblue;">
            <animate attributeName="y" form="160" to="160" begin="3s" dur="1s" repeatCount="indefinite"></animate>
        </rect>
    </g>
</svg>

在SVG动画中，主要基于SMIL即Synchronized Multimedia Integration Language，同步多媒体集成语言来进行实现，通过使用SMIL可以做到动画的移动、颜色、路径运动、元素数值属性等效果。

路径

路径

1
2
3
4
5
6
7
8
9
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <rect x="0" y="0" width="10" height="10" style="stroke: blue;fill: none;">
            <animateMotion 
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite" />
    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="#cd0000" stroke-width="2" fill="none"/>
</svg>

SVG Animation的强大之处在于只要是浏览器页面中，使用animation元素，即使在没有css、js的情况下也可以实现，而svg图像可通过使用贝塞尔曲线（bezier curve）进行。

贝塞尔曲线

ID DA
线性贝塞尔曲线（一次） 1
二次贝塞尔曲线 2
三次贝塞尔曲线 3
四次被塞尔曲线 4
五次被塞尔曲线 5

贝塞尔曲线又被称之为济埃曲线，主要应用在二维图形应用程序的数学曲线，一般矢量图形软件通过贝塞尔曲线来精确画出曲线，主要通过线段与节点组成：

  1. 节点可通过拖动支点
  2. 线段可进行伸缩

贝塞尔曲线指令

在上述的code直至中，我们主要使用了path元素来写贝塞尔曲线命令，通常Canvas以及CSS3动画函数也会使用贝塞尔曲线，但语法格式会有大多数不同，就比如svg的:

1
<path xmlns="http://www.w3.org/2000/svg" d="M10,50 q60,50 100,0 q60,-50 100,0"/>

通过指令+坐标值进行实现，在svg中，标准的指令值有“10”个，分别为：

ID DA
M 移动到……
Z 关闭路径
L 直线到……
H 水平线到……
V 垂直线到……
C 三次贝塞尔曲线到……
S 光滑三次贝塞尔曲线到……
Q 二次贝塞尔曲线到……
T 光滑贝塞尔曲线到……
A 椭圆弧
R Catumll-Rom 曲线

贝塞尔曲线基础

点
一个标准的贝塞尔曲线当中，主要有四个点，分别为起始点（x）、终止点（y）、两个曲线点（x1,y1 and x2,y2）
三次贝塞尔曲线
在上图的贝塞尔曲线中的坐标需要组合为svg格式，主要格式为：

  1. M
    1. 211 375
  2. C
    1. x1,y1
      1. 579 294
    2. x2,y2
      1. 209 464
  3. X,Y
    1. 464 384

其表达式为M 211 375 C 579 294, 206 209, 464 384 即 ：
效果

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
    <path d='M211 375 C 579 294,206 209, 464 384' style="stroke:blue;stroke-width:1;fill:rgb(238, 238, 238);"></path>
</svg>

最后强烈推荐使用“ http://wx.karlew.com/canvas/bezier/ ”进行绘制贝塞尔曲线，虽然所生成的code为Canvas格式，但我们依然可以进行提取为CSS或SVG格式的语法

⬅️ Go back