一、案例效果
案例效果1
案例效果2
二、应用场景
SVG作为矢量图图片格式，具有广泛的用途，比如数据增长变化、文字图形展示，Epub360可以对SVG的路径，进行动画播放控制。也可使用该组件，粘贴各种SVG图形文本，不加动画，作为一种配图使用效果也是不错的。
三、素材准备
Demo样例。这里提供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>
四、功能设置
如果是简单的线条或者图形描边，编辑器中有图形组件，是支持SVG描边动画的。
1.在AI软件中，新建画布尺寸。
2.用钢笔工具或直线段工具绘制路径，主要不要给路径添加虚线、填充、效果等设置。
2.选择所有绘制路径，设置无填充颜色。
3.设置文件存储为SVG格式，点击存储后，会弹出新的弹窗，注意不要关闭
4.在弹窗中点击SVG代码，在弹出的txt文件中复制代码
5.快捷键Ctrl+A全选，Ctrl+C复制代码；
除了可以通过Ai软件绘制，还可以用PS软件，这里大家可以百度一下具体方法。
6.来到H5编辑器面板，添加SVG组件。
7.点击SVG组件，右侧面板粘贴SVG代码。可调整线条宽度、颜色等。
8.选中SVG组件，给其添加SVG描绘动画。选择SVG描绘动画类型，点击橙色+号添加；
9.如果想玩转SVG动画，必须理解SVG动画的路径设置。
（1）如何理解起始／结束状态。SVG路径的状态，指的就是原始SVG路径显示的区间，用的是百分号来表示，大家可以看一下下图所示：
这是一条完整的线段： 这是选取其中的一段（用百分号表示）：
（2）先定义好起始和结束状态后，在动画持续时间内，从起始状态变化到结束状态，就是SVG描绘动画了。这里例举几个常用的状态搭配：
| 起始 | 结束 | 效果 |
| 0%，0%（起点） | 0%，100%（完整的路径） | 从头开始绘制完整的路径 |
| 0%，100%（完整的路径） | 0%，0%（起点） | 完整的路径从尾部开始消失 |
| 0％，100%（完整的路径） | 50%，50%（中点） | 完整的路径从两头开始消失 |
| 0%，10%（头部的10%） | 90%，100%（尾部的10%） | 一段固定长度走过完整的路径 |
（3）同理，如果需要反向描绘一段SVG，就用这个参数值
10.同理，如果需要反向描绘一段SVG，就用这个参数值
注意事项：
SVG仅支持无填充的线条描边，且不支持渐变色描边；
SVG不能制作剪切蒙版，如果有建立剪切蒙版需释放，去掉剪切蒙版。
SVG组件的另外一种用法：《SVG变形动画》