title: How to set static SVG size for `<g id="child">` element under `<svg id="parent">` element that gets transform attr
body: <p>Main Question:</p>
  
  <p>Is there a way to set a static width and height on <code>&lt;g&gt;</code> elements so that they don't get effected by transform attribute done on its parent view-box <code>&lt;svg&gt;</code> element?</p>
  
  <p>i.e.</p>
  
  <p><code>&lt;svg id="viewbox" transform="translate(1,5)scale(2)"&gt; 
      // continuously gets the transform attr via js upon zoom event
      &lt;g&gt;
          &lt;path "the shape of a triangle"/&gt;
          &lt;path same/&gt;
          &lt;path same/&gt;
          &lt;path same/&gt;
          &lt;path same/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;</code></p>
  
  <p>I want everything under the <code>&lt;g&gt;</code> element to translate according to the zoom event transform values that the <code>&lt;svg&gt;</code> view-box receives, but not scale the dimensions of the <code>&lt;g&gt;</code> element. So that it looks like the screen is zooming into one section of the view-box, but without the <code>&lt;g&gt;</code> elements changing dimensions.</p>