视频教程
Epub360-SVG路径动画视频教程（讲师：元小望）
一、案例效果
二、应用场景
SVG作为矢量图图片格式，具有广泛的用途，Epub360可以对SVG的路径，进行动画播放控制。
使用这个组件，可以简单的粘贴各种SVG图形文本，不加动画，作为一种配图使用效果也是不错的。
三、组件用法
基本用法
1. 点击添加SVG路径组件
2.我们提供了这个SVG文本样例，可以拷贝后自己试试 ：）
<!--?xml version="1.0" encoding="utf-8"?--> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 320 480" xml:space="preserve"> <path fill="none" stroke="#FF0000" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" d="M77-159v304.472 c0,5.5,4.328,9.528,9.828,9.528H238.5c5.5,0,9.5,4.972,9.5,10.472v5.157c0,5.5-4,10.371-9.5,10.371H86.828 c-5.5,0-9.828,4.129-9.828,9.629v4.151c0,5.5,4.328,10.22,9.828,10.22H238.5c5.5,0,9.5,4.28,9.5,9.78v5.157 c0,5.5-4,10.062-9.5,10.062H87.826c-5.5,0-9.826,4.438-9.826,9.938v5.157c0,5.5,4.326,9.905,9.826,9.905H238.5 c5.5,0,9.5,4.595,9.5,10.095v4.15c0,5.5-4,9.755-9.5,9.755H89.822c-5.5,0-9.822,4.745-9.822,10.245v5.157 c0,5.5,4.322,9.598,9.822,9.598h147.68c5.5,0,10.498,4.902,10.498,10.402V574"></path> </svg>
3.粘贴SVG代码，并点击下方的保存按钮。
4. 选中SVG组件，添加“SVG描绘动画”
5. 动画设置：关键是持续时间、起始结束状态 这几个属性
6. 把这个组件尺寸调整一下，单页预览就可以开头demo的效果了。
高级用法
1.我们想要绘制SVG线条，需要借助一定的软件，方式之一：通过illustrator获取。
（1）把illustrator打开一个矢量图文件另存为... 注意保存时选择SVG格式
（2）在存储后弹出的SVG选项对话框中，点击“SVG代码...”
（3）全部选中后拷贝到粘贴板中，这样就可以粘贴到Epub360的SVG路径组件里了。
（4）这里需要说明的是：不是所有SVG内容都可以做路径动画，如果里面有填充颜色，就不能做描绘动画了；
另外，如果SVG的线条在AI中使用了虚线等样式，在H5作品中整个SVG组件周围会显示白边，所以不支持虚线样式。具体的可以在后面看下SVG动画怎么做。
2.除了可以通过Ai软件绘制，还可以用PS软件，这里大家可以百度一下具体方法。
如果是简单的线条或者图形描边，编辑器中有图形组件，是支持SVG描边动画的。
3.如果想玩转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，就用这个参数值
SVG组件的另外一种用法：《SVG变形动画》
回复(15)