svg播放器
svg播放器
何时使用
- 播放svg动画的时候
浏览器支持
安装
npm install svg-player --save运行
# 默认开启服务器，地址为 ：http://localhost:8000/
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start
# 构建生产环境静态文件，用于发布文档
npm run site代码演示
在线示例：https://mraiguo.github.io/svg-player/site
基本
基本用法。
import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
class App extends React.Component {
componentDidMount () {
// svg的url地址不能跨域
new SvgPlayer('#container-1', 'https://mraiguo.github.io/svg-player/site/tiger.svg', { attr: { height: 200 }, style: { width: '200px' } })
}
render() {
return (
<div id="container-1"></div>
);
}
}
ReactDOM.render(<App />, mountNode);控制svg的暂停播放
控制svg动画两秒后暂停播放
import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
class App extends React.Component {
componentDidMount () {
new SvgPlayer('#container-2', 'https://mraiguo.github.io/svg-player/site/horse.svg', {}, (svgPlayer) => {
setTimeout(() => {
svgPlayer.pause()
}, 2000)
})
}
render() {
return (
<div id="container-2"></div>
);
}
}
ReactDOM.render(<App />, mountNode);配置是否显示按钮
不显示播放/暂停按钮和重新开始按钮
import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
class App extends React.Component {
componentDidMount () {
new SvgPlayer('#container-3', 'https://mraiguo.github.io/svg-player/site/horse-1.svg', { showPlayButton: false, showReloadButton: false})
}
render() {
return (
<div id="container-3"></div>
);
}
}
ReactDOM.render(<App />, mountNode);传入普通图片
当传入普通图片时不显示操作按钮
import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
class App extends React.Component {
componentDidMount () {
new SvgPlayer('#container-5', '//cdncs.101.com/v0.1/static/fish/image/priview.jpg')
}
render() {
return (
<div id="container-5"></div>
);
}
}
ReactDOM.render(<App />, mountNode);配置是否拖拽和缩放
可配置是否可以通过滚轮缩放以及鼠标拖拽
import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
class App extends React.Component {
componentDidMount () {
new SvgPlayer('#container-6', 'https://mraiguo.github.io/svg-player/site/horse-1.svg', {
draggable: true,
scalable: true
})
}
render() {
return (
<div id="container-6"></div>
);
}
}
ReactDOM.render(<App />, mountNode);API
new SvgPlayer(selector, url, options, readyCallback)
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 | 无 |
| draggable | 是否可拖拽 | boolean | false |
| scalable | 是否可缩放 | boolean | false |
| attr | 给object标签传入属性和值 | object | 无 |
| style | 给object标签传入style属性值 | object | 无 |
SvgPlayer
使用方式如下
const svgPlayer = new SvgPlayer(selector, url, options, readyCallback)
svgPlayer.pause()
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| play | 播放svg动画 | function | 无 |
| pause | 暂停svg动画 | function | 无 |
| svgDocument | svg的document对象 | object | 无 |
| svgEl | svg对象 | object | 无 |
| svgPlayerEl | 外层容器对象 | object | 无 |
| objectEl | 引用svg的object标签对象 | object | 无 |
| playButtonEL | 播放暂停按钮对象 | object | 无 |
| reloadButton | 回到开始按钮对象 | object | 无 |
