svg-player v2.0.2

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对象。

options

配置参数如下

SvgPlayer

使用方式如下

const svgPlayer = new SvgPlayer(selector, url, options, () => {
  svgPlayer.pause()
})