title: How can I dynamically update SVG viewBox values from Polygon
body: <p>I have created SVG maps of a comic book page panels. </p>
  
  <pre><code>&lt;svg id="svg1413"  class="svg-pg" width="100%" height="100%" version="1.1" viewBox="0 0 178 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transition: .6s ease-out;"&gt;
      &lt;image id="image1966" width="178" height="254" clip-path="url('#SvgjsClipPath1413')" xlink:href="https://i.imgur.com/yiZFUK4.jpg" /&gt;
      &lt;g id="SvgjsG1413" clip-path="url('#SvgjsClipPath1413')" class="click-panels"&gt;
          &lt;polygon fill="transparent" points=" 12,13 88,13 88,49 12,49"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 81,44 166,44 166,74 81,74"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 12,13 166,13 166,75 12,75"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 101,80 166,80 166,118 101,118"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 12,80 166,80 166,147 12,147"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 12,152 91,152 91,200 12,200"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 73,171 155,171 155,209 73,209"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 12,198 79,198 79,235 12,235"&gt;&lt;/polygon&gt;
          &lt;polygon fill="transparent" points=" 12,152 166,152 166,235 12,235"&gt;&lt;/polygon&gt;
      &lt;/g&gt;
      &lt;defs id="SvgjsDefs1413"&gt;
          &lt;clipPath id="SvgjsClipPath1413"&gt;
              &lt;rect id="SvgjsRect1413" width="100%" height="100%" x="0" y="0"&gt;
              &lt;/rect&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;     
  &lt;/svg&gt;
  &lt;svg&gt;
      ...svg content
  &lt;/svg&gt;
  &lt;svg&gt;
      ...svg content
  &lt;/svg&gt;
  </code></pre>
  
  <p>What I want to achieve is:</p>
  
  <ul>
  <li>Loop through all the &lt;svg> tags</li>
  <li>while on an &lt;svg>, loop through the &lt;polygon> tags contained within the &lt;svg></li>
  <li>Each &lt;polygon> contains 4 pairs of coordinates (eg. <code>points=" x1,y1 x2,y2 x3,y3 x4,y4"</code>)</li>
  <li>I want the parent &lt;svg> <code>viewBox</code> values and the &lt;rect> X and Y values to be updated with values from the current &lt;polygon> points in the loop.</li>
  </ul>
  
  <p>I have figured out how to calculate the values, but I don't know how to achieve this in Javascript.</p>
  
  <p>My pseudo-code for calculating &lt;svg> <code>viewBox</code> values</p>
  
  <pre><code>if &lt;svg viewBox=" a b c d "&gt;
  a = x1, b = y1, c = x2 - x1, d = y3 - y2
  </code></pre>
  
  <p>Updating &lt;rect> Values</p>
  
  <pre><code>if &lt;rect x="e" y="f"&gt;
  e = x1, f = y1
  </code></pre>
  
  <p>UPDATE: How do I control the transitions with click/swipe events rather than making it automatic?</p>
  
  <pre><code>&lt;div id="controls" class="ctl-btn" style="width: 100%; position: absolute; bottom: 0; margin: 0 -8px; background-color: rgba(6,6,6,0.40);"&gt;
      &lt;div style="max-width: 800px; text-align: center; margin: 0 auto;"&gt;
          &lt;button class="pg-ctl-bk" style="margin: 8px; padding: 8px 10px;"&gt;  Back &lt;/button&gt;
          &lt;button class="pg-ctl-nxt" style="margin: 8px; padding: 8px 10px;"&gt; Next  &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>