title: Trying to align to bottom of viewport inside svg
body: <p>In this codepen, I've thrown everything I could find at the svg rectangles and none of them want to budge (preserveAspectRatio, alignment-baseline, vertical-align) 
  <a href="https://codepen.io/fvila/pen/aYbvrQ" rel="nofollow noreferrer">https://codepen.io/fvila/pen/aYbvrQ</a> </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;div &gt;
    &lt;svg width="300" height="300" viewBox="0 0 300 300" class="demo bottom" alignment-baseline="baseline" preserveAspectRatio=“xMaxYMax slice”&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" alignment-baseline="baseline" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)"  style="vertical-align:bottom" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25"  transform="scale(1.23)" preserveAspectRatio=“xMaxYMax slice” /&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)"  preserveAspectRatio=“xMaxYMax meet” /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div  style="position:absolute; top:0; left:500px"&gt;
  &lt;svg width="300" height="300" viewBox="0 0 300 300" class="demo bottom" alignment-baseline="baseline" preserveAspectRatio=“xMaxYMax meet”&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" alignment-baseline="baseline" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25"  transform="scale(1.23)" style="vertical-align:bottom" /&gt;
      &lt;rect class="obj" width="53.25" height="53.25"   transform="scale(1.23)" preserveAspectRatio=“xMaxYMax slice” /&gt;
      &lt;rect class="obj" width="53.25" height="53.25"   transform="scale(1.23)" preserveAspectRatio=“xMaxYMax meet” /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>