title: how to zoom in on a complex svg structure
body: <p>I have a complex set of shapes that are in the snippet. They are rendered with React but I'm really just looking for some pointers about how I would go about being able to zoom these shapes in and out.</p>
  
  <p>My googling is failing and I can only really find examples of graphs.</p>
  
  <p>How can zoom in and out complex structures like this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;svg height="767" width="903"&gt;
      &lt;g class="vx-group vx-tree" transform="translate(20, 70)"&gt;
          &lt;g class="vx-group" transform="translate(0, 70)"&gt;
              &lt;g class="vx-group" transform="translate(0, 0)"&gt;
                  &lt;path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5"
                        stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"&gt;&lt;/path&gt;
              &lt;/g&gt;
              &lt;g class="vx-group" transform="translate(0, 0)"&gt;
                  &lt;g class="vx-group" transform="translate(451.5, 0)" opacity="1"&gt;
                      &lt;g class="vx-group node__container" transform="translate(0, 0)"&gt;
                          &lt;svg class="" x="0" y="0" style="overflow: visible;"&gt;
                              &lt;polygon
                                      points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"
                                      class="node__hexagon"&gt;&lt;/polygon&gt;
                          &lt;/svg&gt;
                          &lt;g class="vx-group node__business-unit" transform="translate(0, 0)"&gt;
                              &lt;use xlink:href="#icon-BusinessUnit"&gt;&lt;/use&gt;
                          &lt;/g&gt;
                          &lt;g class="hierarchy-label__container" transform="translate(0, -40)"&gt;
                              &lt;path class="" d="
                                    M 0.0078125, 5.15625
                                    L 34.64882865137755,25.156249999999996 
                                    M -0.9921875, 5.15625 
                                    L -34.63320365137754,25.156249999999996
                                    H -65.8515625 
                                    a8,8 0 0 1 -8,-8  
                                    V -47.15625 
                                    a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8 
                                    L 73.8515625, 17.156249999999996  
                                    a8,8 0 0 1 -8,8 
                                    L 34.64882865137755, 25.156249999999996 
                                    Z 
                                   "&gt;
                              &lt;/path&gt;
                              &lt;svg x="0" y="0" style="overflow: visible;"&gt;
                                  &lt;text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle"
                                        style="pointer-events: none;"&gt;
                                      &lt;tspan x="0" dy="0em"&gt;Finance&lt;/tspan&gt;
                                  &lt;/text&gt;
                              &lt;/svg&gt;
                              &lt;svg x="0" y="0" style="overflow: visible;"&gt;
                                  &lt;text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle"
                                        style="pointer-events: none;"&gt;
                                      &lt;tspan x="0" dy="0.71em"&gt;Business Unit&lt;/tspan&gt;
                                  &lt;/text&gt;
                              &lt;/svg&gt;
                          &lt;/g&gt;
                      &lt;/g&gt;
                  &lt;/g&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>