DEVHIDE
Login Or Sign up

big size of svg not working proper how to set big svg in react-pan-zoon-svg?

597 Views Asked by At

here i am using react-pan-zoom-svg and try to load large SVG in zoomable area

I am getting some issues

1) when svg load its not load from center point of svg

2) when i move SVG its matrix value take me negative

3) fit to screen not working

shared jspaddel not working some how i am not able to solve it but my all code is there

Please help

Thank you in advance

const {ReactSVGPanZoom} = window.ReactSVGPanZoom;

class Example extends React.Component{

 render () {
   return (
  
     <ReactSVGPanZoom
        width={window.innerWidth - 20} height={window.innerHeight - 20} scaleFactorMin={0.99}
        onClick={event => console.log(event.x, event.y, event.originalEvent)}>
  
        <svg width={4970} height={6480}>
        <rect x="0" fill="#000003" 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 id="M4_x5F_25" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2994.472,2818.021   l117.956,117.956"/>
   <path id="M4_x5F_24" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2994.472,2818.021   l-48.396-48.396V2720.5"/>
   <path id="M4_x5F_23" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2946.076,2531.275V2720.5"/>
   <path id="M4_x5F_22" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2805.869,2531.275h140.207"/>
   <path id="M4_x5F_21" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2699.912,2542.543l11.269-11.268   h94.688"/>
   <path id="M4_x5F_20" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2645.904,2596.551l54.008-54.008   "/>
   <path id="M4_x5F_19" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2561.827,2596.551h84.077"/>
   <path id="M4_x5F_18" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2481.671,2596.551h80.156"/>
   <path id="M4_x5F_17" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2366.625v11.977h24.649   v217.949"/>
   <path id="M4_x5F_16" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2288.25v78.375"/>
   <path id="M4_x5F_15" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2233.313v54.938"/>
   <path id="M4_x5F_14" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2183.813v49.5"/>
   <path id="M4_x5F_13" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2183.813v-14.185   l45.986-45.99"/>
   <path id="M4_x5F_12" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2503.008,2123.638l19.015-19.015   h61.123"/>
   <path id="M4_x5F_11" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2583.145,2026.36v78.263"/>
   <path id="M4_x5F_10" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.518,2026.36h125.627"/>
   <path id="M4_x5F_9" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2366.921,1935.763l90.598,90.598"/>
   <path id="M4_x5F_8" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2273.45,1842.293l93.471,93.47"/>
   <path id="M4_x5F_7" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2212.099,1780.943l61.351,61.35"/>
   <path id="M4_x5F_6" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2212.099,1780.943l-40.314-40.313   "/>
   <path id="M4_x5F_5" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2132.488,1701.332l39.297,39.297"/>
   <path id="M4_x5F_4" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2089.827,1658.67l42.661,42.662"/>
   <path id="M4_x5F_3" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2052.288,1621.132l37.539,37.539"/>
   <path id="M4_x5F_2" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2015.544,1584.386l36.745,36.746"/>
   <path id="M4_x5F_1" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M1857.804,1426.646l157.739,157.74   "/>
  </g>
  <g id="Layer_8">
   <g>
    <path fill="#B21436" d="M2583.687,2107.595c-1.638,0-2.97-1.332-2.97-2.97s1.332-2.97,2.97-2.97c1.637,0,2.969,1.332,2.969,2.97    S2585.324,2107.595,2583.687,2107.595z"/>
   </g>
   <path fill="#B21436" d="M2805.881,2534.248c-1.64,0-2.972-1.332-2.972-2.97s1.332-2.97,2.972-2.97c1.637,0,2.969,1.332,2.969,2.97   S2807.516,2534.248,2805.881,2534.248z"/>
   <g>
    <path fill="#B21436" d="M2583.686,2030.518c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967    S2585.322,2030.518,2583.686,2030.518z"/>
   </g>
   <g>
    <path fill="#B21436" d="M2458.059,2030.518c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967    S2459.695,2030.518,2458.059,2030.518z"/>
   </g>
   <path fill="#B21436" d="M2457.562,2186.475c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2186.475,2457.562,2186.475z"/>
   <path fill="#B21436" d="M2457.562,2236.268c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2236.268,2457.562,2236.268z"/>
   <path fill="#B21436" d="M2457.562,2291.273c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2291.273,2457.562,2291.273z"/>
   <circle fill="#B21436" cx="2700.288" cy="2542.87" r="2.969"/>
   <circle fill="#B21436" cx="2646.456" cy="2596.553" r="2.969"/>
   <path fill="#B21436" d="M2561.969,2599.521c-1.637,0-2.969-1.332-2.969-2.97c0-1.637,1.332-2.969,2.969-2.969   c1.638,0,2.97,1.332,2.97,2.969C2564.939,2598.189,2563.607,2599.521,2561.969,2599.521z"/>
   <path fill="#B21436" d="M2457.562,2369.464c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2369.464,2457.562,2369.464z"/>
   <g>
    <path fill="#B21436" d="M2482.21,2599.52c-1.636,0-2.968-1.33-2.968-2.967c0-1.636,1.332-2.967,2.968-2.967    c1.637,0,2.968,1.331,2.968,2.967C2485.177,2598.189,2483.845,2599.52,2482.21,2599.52z"/>
   </g>
   <g>
    <path fill="#B21436" d="M2503.431,2126.729c-1.638,0-2.968-1.332-2.968-2.968s1.33-2.968,2.968-2.968    c1.637,0,2.968,1.332,2.968,2.968S2505.068,2126.729,2503.431,2126.729z"/>
   </g>
   <path fill="#B21436" d="M2946.619,2534.248c-1.637,0-2.969-1.332-2.969-2.97s1.332-2.97,2.969-2.97c1.638,0,2.97,1.332,2.97,2.97   S2948.258,2534.248,2946.619,2534.248z"/>
   <g>
    <path fill="#B21436" d="M2946.61,2723.278c-1.637,0-2.968-1.332-2.968-2.968c0-1.638,1.331-2.97,2.968-2.97    s2.969,1.332,2.969,2.97C2949.579,2721.947,2948.247,2723.278,2946.61,2723.278z"/>
   </g>
   <g>
    <path fill="#B21436" d="M2994.676,2820.653c-1.636,0-2.968-1.332-2.968-2.968c0-1.637,1.332-2.968,2.968-2.968    s2.967,1.331,2.967,2.968C2997.641,2819.322,2996.31,2820.653,2994.676,2820.653z"/>
   </g>
   <path fill="#B21436" d="M3112.772,2938.729c-1.637,0-2.968-1.332-2.968-2.969c0-1.636,1.331-2.968,2.968-2.968   s2.968,1.332,2.968,2.968C3115.74,2937.396,3114.409,2938.729,3112.772,2938.729z"/>
   <g>
    <path fill="#B21436" d="M3188.532,3014.521c-1.637,0-2.968-1.332-2.968-2.969c0-1.636,1.331-2.968,2.968-2.968    s2.969,1.332,2.969,2.968C3191.501,3013.189,3190.169,3014.521,3188.532,3014.521z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3253.472,3079.457c-1.638,0-2.968-1.331-2.968-2.967c0-1.637,1.33-2.967,2.968-2.967    c1.636,0,2.967,1.33,2.967,2.967C3256.439,3078.126,3255.108,3079.457,3253.472,3079.457z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3349.292,3175.286c-1.637,0-2.968-1.331-2.968-2.968c0-1.636,1.331-2.968,2.968-2.968    s2.968,1.332,2.968,2.968C3352.26,3173.955,3350.927,3175.286,3349.292,3175.286z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3392.807,3218.786c-1.636,0-2.967-1.331-2.967-2.968c0-1.636,1.331-2.968,2.967-2.968    s2.967,1.332,2.967,2.968C3395.774,3217.455,3394.443,3218.786,3392.807,3218.786z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3498.712,3324.697c-1.636,0-2.967-1.332-2.967-2.969s1.331-2.967,2.967-2.967    c1.638,0,2.969,1.33,2.969,2.967C3501.679,3323.365,3500.348,3324.697,3498.712,3324.697z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.788,3724.678c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3723.346,3698.425,3724.678,3696.788,3724.678z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.788,3805.133c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3803.801,3698.425,3805.133,3696.788,3805.133z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.788,3919.344c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3918.012,3698.425,3919.344,3696.788,3919.344z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.788,4113.354c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,4112.021,3698.425,4113.354,3696.788,4113.354z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.413,4214.142c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.381,4212.81,3698.05,4214.142,3696.413,4214.142z"/>
   </g>
   <g>
    <path fill="#B21436" d="M3696.792,3522.764c-1.636,0-2.967-1.332-2.967-2.967c0-1.637,1.331-2.967,2.967-2.967    c1.638,0,2.969,1.33,2.969,2.967C3699.76,3521.432,3698.428,3522.764,3696.792,3522.764z"/>
   </g>
   <path fill="#B21436" d="M1858.345,1429.613c-1.636,0-2.968-1.331-2.968-2.967c0-1.637,1.332-2.969,2.968-2.969   s2.967,1.332,2.967,2.969C1861.312,1428.282,1859.981,1429.613,1858.345,1429.613z"/>
   <path fill="#B21436" d="M2015.488,1587.447c-1.636,0-2.968-1.332-2.968-2.969s1.332-2.969,2.968-2.969s2.968,1.332,2.968,2.969   C2018.456,1586.116,2017.124,1587.447,2015.488,1587.447z"/>
   <path fill="#B21436" d="M2052.195,1624.158c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.969,2.967-2.969   s2.968,1.332,2.968,2.969C2055.163,1622.827,2053.831,1624.158,2052.195,1624.158z"/>
   <path fill="#B21436" d="M2090.087,1661.352c-1.637,0-2.969-1.332-2.969-2.969c0-1.636,1.332-2.968,2.969-2.968   s2.969,1.332,2.969,2.968C2093.054,1660.02,2091.723,1661.352,2090.087,1661.352z"/>
   <path fill="#B21436" d="M2132.844,1704.112c-1.637,0-2.967-1.332-2.967-2.968c0-1.637,1.33-2.968,2.967-2.968   c1.636,0,2.967,1.331,2.967,2.968S2134.48,1704.112,2132.844,1704.112z"/>
   <path fill="#B21436" d="M2171.967,1743.355c-1.638,0-2.97-1.332-2.97-2.97c0-1.636,1.332-2.968,2.97-2.968   c1.636,0,2.968,1.332,2.968,2.968C2174.933,1742.024,2173.602,1743.355,2171.967,1743.355z"/>
   <path fill="#B21436" d="M2212.559,1783.287c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.969,2.967-2.969   s2.967,1.332,2.967,2.969C2215.526,1781.956,2214.195,1783.287,2212.559,1783.287z"/>
   <path fill="#B21436" d="M2273.734,1844.998c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.967,2.967-2.967   s2.968,1.33,2.968,2.967C2276.702,1843.667,2275.37,1844.998,2273.734,1844.998z"/>
   <path fill="#B21436" d="M2367.177,1938.439c-1.637,0-2.967-1.332-2.967-2.968s1.33-2.967,2.967-2.967   c1.636,0,2.967,1.331,2.967,2.967C2370.143,1937.109,2368.812,1938.439,2367.177,1938.439z"/>
   
   <rect x="204.085" y="190.131" fill="#B21436" width="51.005" height="51.005"/>
   
  </g>
  
 
        </svg>  
      </ReactSVGPanZoom>
    );
  }
 }


ReactDOM.render(
  <div><Example /></div>,
  document.getElementById('container')
);
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;
}
<script src="https://unpkg.com/[email protected]/build-umd/react-svg-pan-zoom.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="container"></div>

jquery reactjs svg svgpanzoom jquery.panzoom
Original Q&A
3

There are 3 best solutions below

0
On

not sure what are you trying to achieve and how you decided on those "fixed widths and heights.

But here is a working version of your code: https://jsfiddle.net/tzookb/79742ncq/

now please define what you want to achieve so I could help.

I had fought svg with react for a long time.

Quick update to your code:

 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)}>
0
On

I spend a bit of time working with this and I could achieve a few desired functionalities.

Working demo: https://codesandbox.io/s/wnp0np9l18

1) when svg load its not load from center point of svg

What I did was a workaround, given the value you can set the where the "zoom" is, with the values e & f. I couldn't investigate more the meanings, but it's a point to start. I just gave to ReactSVGPanZoom component the value based of the SVG.

<ReactSVGPanZoom
  value={{
    e: SVG_X_Size / 2,
    f: SVG_Y_Size / 2
    ...rest of values
  }}
  ...

2) when i move SVG its matrix value take me negative

  1. No idea about this.

3) fit to screen not working

  1. The scale factory was not enough to scale, set it to: scaleFactorMin={0.0001} should fix it.
0
On

I'm little confused with your question anyway i'm trying to resolve your issue with my understanding of your problem.

To resolve your issue you need to change your ReactSVGPanZoom

Your code should be

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={4970} height={6480}>
    <rect x="0" fill="#000003" 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 id="M4_x5F_25" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2994.472,2818.021   l117.956,117.956"/>
     <path id="M4_x5F_24" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2994.472,2818.021   l-48.396-48.396V2720.5"/>
     <path id="M4_x5F_23" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2946.076,2531.275V2720.5"/>
     <path id="M4_x5F_22" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2805.869,2531.275h140.207"/>
     <path id="M4_x5F_21" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2699.912,2542.543l11.269-11.268   h94.688"/>
     <path id="M4_x5F_20" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2645.904,2596.551l54.008-54.008   "/>
     <path id="M4_x5F_19" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2561.827,2596.551h84.077"/>
     <path id="M4_x5F_18" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2481.671,2596.551h80.156"/>
     <path id="M4_x5F_17" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2366.625v11.977h24.649   v217.949"/>
     <path id="M4_x5F_16" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2288.25v78.375"/>
     <path id="M4_x5F_15" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2233.313v54.938"/>
     <path id="M4_x5F_14" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2183.813v49.5"/>
     <path id="M4_x5F_13" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.021,2183.813v-14.185   l45.986-45.99"/>
     <path id="M4_x5F_12" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2503.008,2123.638l19.015-19.015   h61.123"/>
     <path id="M4_x5F_11" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2583.145,2026.36v78.263"/>
     <path id="M4_x5F_10" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2457.518,2026.36h125.627"/>
     <path id="M4_x5F_9" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2366.921,1935.763l90.598,90.598"/>
     <path id="M4_x5F_8" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2273.45,1842.293l93.471,93.47"/>
     <path id="M4_x5F_7" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2212.099,1780.943l61.351,61.35"/>
     <path id="M4_x5F_6" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2212.099,1780.943l-40.314-40.313   "/>
     <path id="M4_x5F_5" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2132.488,1701.332l39.297,39.297"/>
     <path id="M4_x5F_4" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2089.827,1658.67l42.661,42.662"/>
     <path id="M4_x5F_3" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2052.288,1621.132l37.539,37.539"/>
     <path id="M4_x5F_2" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M2015.544,1584.386l36.745,36.746"/>
     <path id="M4_x5F_1" fill="none" stroke="#B21436" strokeWidth="1.5" strokeMiterlimit="10" d="M1857.804,1426.646l157.739,157.74   "/>
    </g>
    <g id="Layer_8">
     <g>
      <path fill="#B21436" d="M2583.687,2107.595c-1.638,0-2.97-1.332-2.97-2.97s1.332-2.97,2.97-2.97c1.637,0,2.969,1.332,2.969,2.97    S2585.324,2107.595,2583.687,2107.595z"/>
     </g>
     <path fill="#B21436" d="M2805.881,2534.248c-1.64,0-2.972-1.332-2.972-2.97s1.332-2.97,2.972-2.97c1.637,0,2.969,1.332,2.969,2.97   S2807.516,2534.248,2805.881,2534.248z"/>
     <g>
      <path fill="#B21436" d="M2583.686,2030.518c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967    S2585.322,2030.518,2583.686,2030.518z"/>
     </g>
     <g>
      <path fill="#B21436" d="M2458.059,2030.518c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967    S2459.695,2030.518,2458.059,2030.518z"/>
     </g>
     <path fill="#B21436" d="M2457.562,2186.475c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2186.475,2457.562,2186.475z"/>
     <path fill="#B21436" d="M2457.562,2236.268c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2236.268,2457.562,2236.268z"/>
     <path fill="#B21436" d="M2457.562,2291.273c-1.636,0-2.967-1.332-2.967-2.968s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2291.273,2457.562,2291.273z"/>
     <circle fill="#B21436" cx="2700.288" cy="2542.87" r="2.969"/>
     <circle fill="#B21436" cx="2646.456" cy="2596.553" r="2.969"/>
     <path fill="#B21436" d="M2561.969,2599.521c-1.637,0-2.969-1.332-2.969-2.97c0-1.637,1.332-2.969,2.969-2.969   c1.638,0,2.97,1.332,2.97,2.969C2564.939,2598.189,2563.607,2599.521,2561.969,2599.521z"/>
     <path fill="#B21436" d="M2457.562,2369.464c-1.636,0-2.967-1.331-2.967-2.967s1.331-2.967,2.967-2.967s2.967,1.331,2.967,2.967   S2459.198,2369.464,2457.562,2369.464z"/>
     <g>
      <path fill="#B21436" d="M2482.21,2599.52c-1.636,0-2.968-1.33-2.968-2.967c0-1.636,1.332-2.967,2.968-2.967    c1.637,0,2.968,1.331,2.968,2.967C2485.177,2598.189,2483.845,2599.52,2482.21,2599.52z"/>
     </g>
     <g>
      <path fill="#B21436" d="M2503.431,2126.729c-1.638,0-2.968-1.332-2.968-2.968s1.33-2.968,2.968-2.968    c1.637,0,2.968,1.332,2.968,2.968S2505.068,2126.729,2503.431,2126.729z"/>
     </g>
     <path fill="#B21436" d="M2946.619,2534.248c-1.637,0-2.969-1.332-2.969-2.97s1.332-2.97,2.969-2.97c1.638,0,2.97,1.332,2.97,2.97   S2948.258,2534.248,2946.619,2534.248z"/>
     <g>
      <path fill="#B21436" d="M2946.61,2723.278c-1.637,0-2.968-1.332-2.968-2.968c0-1.638,1.331-2.97,2.968-2.97    s2.969,1.332,2.969,2.97C2949.579,2721.947,2948.247,2723.278,2946.61,2723.278z"/>
     </g>
     <g>
      <path fill="#B21436" d="M2994.676,2820.653c-1.636,0-2.968-1.332-2.968-2.968c0-1.637,1.332-2.968,2.968-2.968    s2.967,1.331,2.967,2.968C2997.641,2819.322,2996.31,2820.653,2994.676,2820.653z"/>
     </g>
     <path fill="#B21436" d="M3112.772,2938.729c-1.637,0-2.968-1.332-2.968-2.969c0-1.636,1.331-2.968,2.968-2.968   s2.968,1.332,2.968,2.968C3115.74,2937.396,3114.409,2938.729,3112.772,2938.729z"/>
     <g>
      <path fill="#B21436" d="M3188.532,3014.521c-1.637,0-2.968-1.332-2.968-2.969c0-1.636,1.331-2.968,2.968-2.968    s2.969,1.332,2.969,2.968C3191.501,3013.189,3190.169,3014.521,3188.532,3014.521z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3253.472,3079.457c-1.638,0-2.968-1.331-2.968-2.967c0-1.637,1.33-2.967,2.968-2.967    c1.636,0,2.967,1.33,2.967,2.967C3256.439,3078.126,3255.108,3079.457,3253.472,3079.457z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3349.292,3175.286c-1.637,0-2.968-1.331-2.968-2.968c0-1.636,1.331-2.968,2.968-2.968    s2.968,1.332,2.968,2.968C3352.26,3173.955,3350.927,3175.286,3349.292,3175.286z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3392.807,3218.786c-1.636,0-2.967-1.331-2.967-2.968c0-1.636,1.331-2.968,2.967-2.968    s2.967,1.332,2.967,2.968C3395.774,3217.455,3394.443,3218.786,3392.807,3218.786z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3498.712,3324.697c-1.636,0-2.967-1.332-2.967-2.969s1.331-2.967,2.967-2.967    c1.638,0,2.969,1.33,2.969,2.967C3501.679,3323.365,3500.348,3324.697,3498.712,3324.697z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.788,3724.678c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3723.346,3698.425,3724.678,3696.788,3724.678z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.788,3805.133c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3803.801,3698.425,3805.133,3696.788,3805.133z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.788,3919.344c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,3918.012,3698.425,3919.344,3696.788,3919.344z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.788,4113.354c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.756,4112.021,3698.425,4113.354,3696.788,4113.354z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.413,4214.142c-1.637,0-2.968-1.332-2.968-2.967c0-1.637,1.331-2.967,2.968-2.967    s2.968,1.33,2.968,2.967C3699.381,4212.81,3698.05,4214.142,3696.413,4214.142z"/>
     </g>
     <g>
      <path fill="#B21436" d="M3696.792,3522.764c-1.636,0-2.967-1.332-2.967-2.967c0-1.637,1.331-2.967,2.967-2.967    c1.638,0,2.969,1.33,2.969,2.967C3699.76,3521.432,3698.428,3522.764,3696.792,3522.764z"/>
     </g>
     <path fill="#B21436" d="M1858.345,1429.613c-1.636,0-2.968-1.331-2.968-2.967c0-1.637,1.332-2.969,2.968-2.969   s2.967,1.332,2.967,2.969C1861.312,1428.282,1859.981,1429.613,1858.345,1429.613z"/>
     <path fill="#B21436" d="M2015.488,1587.447c-1.636,0-2.968-1.332-2.968-2.969s1.332-2.969,2.968-2.969s2.968,1.332,2.968,2.969   C2018.456,1586.116,2017.124,1587.447,2015.488,1587.447z"/>
     <path fill="#B21436" d="M2052.195,1624.158c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.969,2.967-2.969   s2.968,1.332,2.968,2.969C2055.163,1622.827,2053.831,1624.158,2052.195,1624.158z"/>
     <path fill="#B21436" d="M2090.087,1661.352c-1.637,0-2.969-1.332-2.969-2.969c0-1.636,1.332-2.968,2.969-2.968   s2.969,1.332,2.969,2.968C2093.054,1660.02,2091.723,1661.352,2090.087,1661.352z"/>
     <path fill="#B21436" d="M2132.844,1704.112c-1.637,0-2.967-1.332-2.967-2.968c0-1.637,1.33-2.968,2.967-2.968   c1.636,0,2.967,1.331,2.967,2.968S2134.48,1704.112,2132.844,1704.112z"/>
     <path fill="#B21436" d="M2171.967,1743.355c-1.638,0-2.97-1.332-2.97-2.97c0-1.636,1.332-2.968,2.97-2.968   c1.636,0,2.968,1.332,2.968,2.968C2174.933,1742.024,2173.602,1743.355,2171.967,1743.355z"/>
     <path fill="#B21436" d="M2212.559,1783.287c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.969,2.967-2.969   s2.967,1.332,2.967,2.969C2215.526,1781.956,2214.195,1783.287,2212.559,1783.287z"/>
     <path fill="#B21436" d="M2273.734,1844.998c-1.636,0-2.967-1.331-2.967-2.967c0-1.637,1.331-2.967,2.967-2.967   s2.968,1.33,2.968,2.967C2276.702,1843.667,2275.37,1844.998,2273.734,1844.998z"/>
     <path fill="#B21436" d="M2367.177,1938.439c-1.637,0-2.967-1.332-2.967-2.968s1.33-2.967,2.967-2.967   c1.636,0,2.967,1.331,2.967,2.967C2370.143,1937.109,2368.812,1938.439,2367.177,1938.439z"/>
     
     <rect x="204.085" y="190.131" fill="#B21436" width="51.005" height="51.005"/> 
    </g>
   </svg>  
  </ReactSVGPanZoom>
    );
  }
 }


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

Related Questions in JQUERY

Related Questions in REACTJS

Related Questions in SVG

Related Questions in SVGPANZOOM

Related Questions in JQUERY.PANZOOM

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.