ReactSVGPanZoom example

A React component that adds pan and zoom features to SVG

by Ayyappan Sakthivadivel

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@2"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  margin: 0;
  background-color: rgba(0, 0, 0, 0.05);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px);
  background-size: 8px 8px;
}

#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
}

Babel + JSX

const {ReactSVGPanZoom} = window.ReactSVGPanZoom;

class Example extends React.Component{
	render () {
  	return (
    	<ReactSVGPanZoom
        width={500} height={500}
        onClick={event => console.log(event.x, event.y, event.originalEvent)}>
  
        <svg width={617} height={316}>
          <g>
            <rect x="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142"/>
            <circle cx="108" cy="108.5" r="100" fill="#0ff" stroke="#0ff"/>
            <circle cx="180" cy="209.5" r="100" fill="#ff0" stroke="#ff0"/>
            <circle cx="220" cy="109.5" r="100" fill="#f0f" stroke="#f0f"/>
          </g>
        </svg>  
      </ReactSVGPanZoom>
    );
  }
 }


ReactDOM.render(
  <div><Example /></div>,
  document.getElementById('container')
);