svg-player

svg播放器

---

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'
 
class App extends React.Component {
  componentDidMount () {
    new SvgPlayer(
      '#container-1', 
      'http://cs.101.com/v0.1/static/fish/image/svg.svg',
      { 
        style: {
          width: '400px',
        },
        scalable: true,
        draggable: true,
        ratio: 1.5
      })
  }
  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',
      'http://cs.101.com/v0.1/static/fish/image/svg.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',
      'http://cs.101.com/v0.1/static/fish/image/svg.svg',
      { 
        showPlayButton: false,
        showReloadButton: false
      }
    )
  }
  render() {
    return (
      <div id="container-3"></div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);

配置是否拖拽和缩放

可配置是否可以通过滚轮缩放以及鼠标拖拽

.custom-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}
 

import "svg-player/lib/style/"
import SvgPlayer from 'svg-player'
 
class App extends React.Component {
  addEvent (svgPlayer) {
    document.getElementById('zoomIn').addEventListener('click', function(){
      svgPlayer.handleZoom(false)
    })
    document.getElementById('zoomOut').addEventListener('click', function(){
      svgPlayer.handleZoom(true)
    })
    document.getElementById('reset').addEventListener('click', function(){
      svgPlayer.zoomInOut(1)
    })
  }
  componentDidMount () {
    new SvgPlayer(
      '#container-6',
      'http://cs.101.com/v0.1/static/fish/image/svg.svg',
      {
        draggable: true,
        scalable: true,
        showZoomButton: true,
        ratio: 2,
        maxZoomSize: 2.5,
        minZoomSize: 0.5,
        zoomStep: 0.3,
        // 自定义loading
        renderLoading: () => {
          const loading = document.createElement('span')
          loading.setAttribute('class', `custom-loading`)
          loading.innerHTML = '加载中...'
          return loading
        }
      },
      (svgPlayer) => {
        this.addEvent(svgPlayer)
      })
  }
  render() {
    return (
      <div>
      <div id="container-6"></div>
      <button id='zoomIn'>放大</button>
      <button id='zoomOut'>缩小</button>
      <br />
      <br />
      <button id='reset'>缩放回原来大小</button>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, mountNode);

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)	无