stack

https://stackoverflow.com/questions/50059042/big-size-of-svg-not-working-proper-how-to-set-big-svg-in-react-pan-zoon-svg

by Tzook Bar Noy

HTML

<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react-svg-pan-zoom@2.16.1/build-umd/react-svg-pan-zoom.min.js"></script>

<div id="container"></div>

CSS

body {
  margin: 0;
  background-color: pink;
}

#container {
  padding: 10px;
}

React

const {ReactSVGPanZoom} = window.ReactSVGPanZoom;

class Example extends React.Component{

	render () {
	  const width = window.innerWidth - 20;
    const height= window.innerHeight - 20;
  	return (
		
    	<ReactSVGPanZoom
        width={width} height={height} scaleFactorMin={0.99}
        onClick={event => console.log(event.x, event.y, event.originalEvent)}>
		
        <svg width={width} height={height}>
        <rect x="0" fill="red" stroke="#FF0000" strokeWidth="0.216" strokeMiterlimit="22.9256" width="4969.988" height="6480"/>
		<g id="Layer_9">
			<path id="M4_x5F_36" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3696.251,4110.594v101.864"/>
			<path id="M4_x5F_35" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3696.251,3916.625v193.969"/>
			<path id="M4_x5F_34" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3696.251,3802.334v114.291"/>
			<path id="M4_x5F_33" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3696.251,3721.333v81.001"/>
			<path id="M4_x5F_32" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3696.251,3519.798v201.535"/>
			<path id="M4_x5F_31" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3498.39,3321.937l197.86,197.861   "/>
			<path id="M4_x5F_30" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3392.493,3216.04   l105.897,105.896"/>
			<path id="M4_x5F_29" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3392.493,3216.04l-43.478-43.478   "/>
			<path id="M4_x5F_28" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3253.389,3076.938l95.626,95.625   "/>
			<path id="M4_x5F_27" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3188.253,3011.8l65.137,65.137"/>
			<path id="M4_x5F_26" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M3188.253,3011.8l-75.824-75.824"/>
			<path...