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