react前端踩坑记录（3）：用@panzoom/panzoom加react实现svg的缩放

1.安装

$ npm install --save @panzoom/panzoom

 

2.在对应文件导入

import Panzoom from '@panzoom/panzoom'

3.对应组件内使用

 componentDidMount() {

    const elem = document.getElementById('svg')

    const panzoom = Panzoom(elem, {

      maxScale: 5

    })

    panzoom.pan(10, 10)

    panzoom.zoom(1, { animate: true })

    elem.parentElement.addEventListener('wheel', panzoom.zoomWithWheel)

  }

 

 

 

参考

https://github.com/timmywil/panzoom

https://timmywil.com/panzoom/demo/