title: Scaling an SVG without affecting paths
body: <p>I'm looking for some pointers on scaling SVG containers without affecting paths inside. I'm working with Greensock.js and would like the SVG containers to scale with the width of the letters themselves (without changing the aspect ratio of the paths inside). The end goal is that the surrounding letters shuffle with the scaling letter. See attached gif for expected result. </p>
  
  <p><a href="https://codepen.io/leecranny/full/mvoXPB" rel="nofollow noreferrer">Scaling Letters Codepen</a>
  <img src="https://i.stack.imgur.com/pgRP8.gif" alt="Final_Result"></p>
  
  <p>See the Codepen, but here is how I've set up my HTML:</p>
  
  <pre><code>&lt;div class="letters"&gt;
      &lt;svg class="lcontainer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 406"&gt;
          &lt;rect class="bottom" x="46" y="353" width="278" height="53" /&gt;
          &lt;rect width="53" height="406" /&gt;
      &lt;/svg&gt;
      &lt;svg class="econtainer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 406"&gt;
          &lt;rect class="outer" x="46" width="278" height="53" /&gt;
          &lt;rect class="inner" x="46" y="247" width="240" height="53" /&gt;
          &lt;rect class="outer" x="46" y="353" width="278" height="53" /&gt;
          &lt;rect width="54" height="406" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>