应用场景
SVG作为矢量图图片格式，具有广泛的用途，Epub360可以对SVG的路径，进行动画播放控制。
使用这个组件，可以简单的粘贴各种SVG图形文本，不加动画，作为一种配图使用效果也是不错的。
三、组件用法
基本用法
1. 点击添加SVG路径组件
2.我们提供了这个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作为矢量图图片格式，具有广泛的用途，Epub360可以对SVG的路径，进行动画播放控制。
使用这个组件，可以简单的粘贴各种SVG图形文本，不加动画，作为一种配图使用效果也是不错的。
三、组件用法
基本用法
1. 点击添加SVG路径组件
2.我们提供了这个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，就用这个参数值
