尝试与svg内的视口底部对齐

Question

在这个codepen中，我抛出了我在svg矩形中找到的所有东西，但没有一个想要让步（preserveAspectRatio，alignment-baseline，vertical-align） https://codepen.io/fvila/pen/aYbvrQ

<div >
  <svg width="300" height="300" viewBox="0 0 300 300" class="demo bottom" alignment-baseline="baseline" preserveAspectRatio=“xMaxYMax slice”>
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" />
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" alignment-baseline="baseline" />
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)"  style="vertical-align:bottom" />
    <rect class="obj" width="53.25" height="53.25"  transform="scale(1.23)" preserveAspectRatio=“xMaxYMax slice” />
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)"  preserveAspectRatio=“xMaxYMax meet” />
  </svg>
</div>

<div  style="position:absolute; top:0; left:500px">
<svg width="300" height="300" viewBox="0 0 300 300" class="demo bottom" alignment-baseline="baseline" preserveAspectRatio=“xMaxYMax meet”>
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" />
    <rect class="obj" width="53.25" height="53.25" transform="scale(1.23)" alignment-baseline="baseline" />
    <rect class="obj" width="53.25" height="53.25"  transform="scale(1.23)" style="vertical-align:bottom" />
    <rect class="obj" width="53.25" height="53.25"   transform="scale(1.23)" preserveAspectRatio=“xMaxYMax slice” />
    <rect class="obj" width="53.25" height="53.25"   transform="scale(1.23)" preserveAspectRatio=“xMaxYMax meet” />
  </svg>
</div>