一、案例效果
二、场景应用
多用于炫酷的矢量设计元素的变形展示。
三、素材准备
1. 这里以AI为例，已经有了基本的图形素材后，需要注意把一个对象的所有节点选中后，利用“对象”菜单建立“复合路径”进行合并；
2. 保存时，点击“文件”菜单，选中存储为“SVG格式”（步骤如下所示）
（1）选择“文件”／“存储为..”
（2）选择格式为“SVG”
（3）在存储后弹出的SVG选项对话框中，点击“SVG代码...”
（4）在打开的文本中，全部选中后拷贝到粘贴板中，这样就可以粘贴到Epub360的SVG路径组件里了。
3.自己可以尝试绘制一个。新建AI文档
2.在左侧菜单里点击椭圆工具，按住Shift键可画出一个正圆，填充黑色，无描边，在该圆上右击，选择建立复合路径；
3.我们依次在圆上画出正方形（填充红色），五角星（填充黄色），每画完一个图形就在该图形上建立复合路径，三个图形的叠放次序如图所示；
4.设置文件存储为，保存类型为SVG，点击保存按钮；
5.在SVG选项的设置面板的下方点击 “显示SVG代码” 按钮；
6.在新弹出网页里的窗口里复制里面的代码，快捷键Ctrl+A是全部选中，Ctrl+C是复制；
7.这里提供demo里直线的SVG文本，可以拷贝后自己试试 ：）
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="鍥惧眰_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="740px" height="1136px" viewBox="0 0 740 1136" enable-background="new 0 0 740 1136" xml:space="preserve"> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="217.169" y1="804.857" x2="217.169" y2="119.143"/> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="357.429" y1="804.857" x2="357.429" y2="194.468"/> <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="502.883" y1="804.857" x2="502.883" y2="371.091"/> </svg>
四、组件用法
基本用法
1.添加SVG组件。在作品的操作页面上方的菜单里点击高级组件，选择SVG组件；
2.粘贴SVG代码，调整组件。在右侧的面板里输入粘贴SVG代码，拖动组件边框设置成合适的大小，移动到合适的位置；
3.添加SVG变形动画。我们在动画类型选择SVG变形动画，依次添加三个SVG变形动画。
在动画1的设置面板中，依次勾选path1，path2，点击确认按钮；
4.在动画2的设置面板中，依次勾选path2，path3，点击确认按钮；
5.在动画3的设置面板中，我们点住path1后面的拖拽按钮，把path1拖动到最下方，依次勾选path3，path1，点击确认按钮；
6.关于节点的设置。如有必要，可以针对一组对象中具体某一个对象设置变形节点。一般无需设置，使用默认节点即可。
高级用法
1.添加SVG组件
2.粘贴SVG代码
3.添加SVG变形动画设置
（1）添加SVG变形动画
2.指定参与变形的对象
3.如有必要，可以针对一组对象中具体某一个对象设置变形节点。一般无需设置，使用默认节点即可。
4.根据需要，可以调整次序，比如多个变形动画组合，进行反复变形的处理。
其他推荐
详细参考《跟小望学习最新SVG》