react中svg平移缩放，setState之后回到初始位置的问题

缩放，setState之后回到初始位置的问题"/>

react中svg平移缩放，setState之后回到初始位置的问题

svg-pan-zoom平移缩放问题

之前项目中使用了react-svg用于展示svg，svg-pan-zoom用于svg的平移缩放。最近发现当页面进行setState之后，svg后重新加载生成，造成之前平移缩放的操作失效，svg回到初始位置，记录一下方便以后查找。

svg-pan-zoom依赖包

 /*** Pan to a rendered position** @param  {Object} point {x: 0, y: 0}* @return {Instance}    Current instance*/pan(point: Point): Instance;

 	 /*** Pan to a rendered position* 平移到渲染的位置* @param  {Object} point {x: 0, y: 0}* @return {Instance}    Current instance*/pan(point: Point): Instance;/*** Get pan vector* 得到平移向量* @return {Object} {x: 0, y: 0}* @return {Instance}    Current instance*/getPan(): Point;/*** Get zoom scale/level* 得到缩放尺度/水平* @return {float} zoom scale*/getZoom(): number;zoomBy(scale: number): Instance;// 将缩放级别设置为 2 //panZoomTiger.zoom(2);// 放大 130% //panZoomTiger.zoomBy(1.3);----------------------------------------------//在setState之前先获取svg的缩放尺寸和平移向量//setState完成之后设置缩放尺寸和平移向量// 获取实例let panZoomTiger = svgPanZoom('#demo-tiger');let getZoom = panZoomTiger.getZoom();let panPoints = panZoomTiger.getPan();this.setState({flag:!this.state.flag},() =>{//我的项目中svg重新生成加载了，使用panZoomTiger无效let _panZoomTiger = svgPanZoom('#demo-tiger');_panZoomTiger.zoom(getZoom );//zoomBy也可_panZoomTiger.pan(panPoints );});

项目中代码(请忽略)

<ReactSVG svgStyle={{ background: config.svgbackground, width: '99%', height: svgHeight + 'px', }} 
src={path2} path={path2} ref={this.SVGRef2} />

myWebsocket.ticker.on('updateAreaYCPointData', (data) => {if (data != null) {//console.log("Diagram: ", data);let svg_Label = ReactDOM.findDOMNode(this.SVGRef2.current);let mySVG = svg_Label.querySelector('svg');if (!mySVG) {return;}var panZoomTiger = svgPanZoom(mySVG);let getZoom = panZoomTiger.getZoom();let panPoints = panZoomTiger.getPan();this.setState({flag:!this.state.flag},()=>{let svg_Label2 = ReactDOM.findDOMNode(this.SVGRef2.current);let mySVG2 = svg_Label2.querySelector('svg');let  panZoomTiger2 = svgPanZoom(mySVG2);panZoomTiger2.zoom(getZoom);panZoomTiger2.pan(panPoints);this.bindingSVG(data);});}});