svg播放器
svg播放器
何时使用
- 播放svg动画的时候
浏览器支持
安装
npm install svg-player --save
运行
# 默认开启服务器,地址为 :http://localhost:8000/ # 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新 npm run start # 构建生产环境静态文件,用于发布文档 npm run site
代码演示
基本
基本用法。
import "svg-player/lib/style/"import SvgPlayer from 'svg-player' Component { '#container-1' 'http://cs.101.com/v0.1/static/fish/image/svg.svg' style: width: '400px' scalable: true draggable: true ratio: 15 } { return <div ="container-1"></div> ; } ReactDOM;
控制svg的暂停播放
控制svg动画两秒后暂停播放
import "svg-player/lib/style/"import SvgPlayer from 'svg-player' Component { '#container-2' 'http://cs.101.com/v0.1/static/fish/image/svg.svg' svgPlayer } { return <div ="container-2"></div> ; } ReactDOM;
配置是否显示按钮
不显示播放/暂停按钮和重新开始按钮
import "svg-player/lib/style/"import SvgPlayer from 'svg-player' Component { '#container-3' 'http://cs.101.com/v0.1/static/fish/image/svg.svg' showPlayButton: false showReloadButton: false } { return <div ="container-3"></div> ; } ReactDOM;
配置是否拖拽和缩放
可配置是否可以通过滚轮缩放以及鼠标拖拽
import "svg-player/lib/style/"import SvgPlayer from 'svg-player' Component { document document document } { '#container-6' 'http://cs.101.com/v0.1/static/fish/image/svg.svg' draggable: true scalable: true showZoomButton: true ratio: 2 maxZoomSize: 25 minZoomSize: 05 zoomStep: 03 // 自定义loading { const loading = document loading loadinginnerHTML = '加载中...' return loading } svgPlayer this } { return <div> <div ="container-6"></div> <button ='zoomIn'>放大</button> <button ='zoomOut'>缩小</button> <br /> <br /> <button ='reset'>缩放回原来大小</button> </div> ; } ReactDOM;
API
new SvgPlayer(selector, url, options, readyCallback)
注意: 当svg文件跨域时需要设置CORS才能操作svg对象。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | svg的url地址(必须同源) | string | 无 |
selector | 放入svg的dom选择器(内部使用document.querySelector) | string | 无 |
options | 配置参数 | SvgPlayer.options | { prefix: 'svg-play', showPlayButton: true, showReloadButton: true } |
readyCallback | 文件加载后的回调;参数为实例化的SvgPlayer | function | 无 |
options
配置参数如下
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefix | 类前缀,可通过修改类前缀自定义类 | string | 无 |
showPlayButton | 是否显示默认播放暂停按钮 | boolean | 无 |
showReloadButton | 是否显示重新开始按钮 | boolean | true |
showZoomButton | 是否显示重新开始按钮 | boolean | false |
renderLoading | 自定义loading | function | 无 |
draggable | 是否可拖拽 | boolean | false |
scalable | 是否可缩放 | boolean | false |
ratio | 初始缩放比例 | number | 1 |
attr | 给播放器容器传入属性和值 | object | 无 |
style | 给播放器容器传入style属性值 | object | 无 |
maxZoomSize | 最大可缩放比例 | number | 4 |
minZoomSize | 最小可缩放比例 | number | 0.2 |
zoomStep | 每次调用缩放时的缩放比例 | number | 0.2 |
SvgPlayer
使用方式如下
const svgPlayer = new SvgPlayer(selector, url, options, () => {
svgPlayer.pause()
})
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
play | 播放svg动画 | function | 无 |
pause | 暂停svg动画 | function | 无 |
svgDocument | svg的document对象 | object | 无 |
svgEl | svg对象 | object | 无 |
svgPlayerEl | 外层容器对象 | object | 无 |
playButtonEL | 播放暂停按钮对象 | object | 无 |
reloadButton | 回到开始按钮对象 | object | 无 |
handleZoom | 每次调用此函数,使元素缩放一定比例, 参数out为true表示缩小,为false表示放大 | function(out: boolean) | 无 |
zoomInOut | 可以调用此函数直接缩放到设置的比例, 参数ratio表示缩放比例 | function(ratio: number) | 无 |