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);
                });
            }
        });