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

Question

在此代码笔中，我将所有可以在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>

Answer 1

这有点奏效，但是...问题似乎仍然是，当您想将最大高度设置为svg坡度以防止从中心对角线向顶部过度缩放时，它会设置原点缩放方向到顶部，这不是您想要的，因为这将斜坡的可见性限制在底部。

但是，这是“足够满意”模式：

将其放在html下面，并将svg放在html和css中。

.svg-container {
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  bottom: -1px;
  height: auto;
}

<div class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100">
      <title>Asset 143</title>
      <g id="slopeShapecontainer" data-name="slopeShapecontainer">
        <g id="slopeShape">
          <path d="M1000,0V100H0Z" style="fill: #252525"></path>
        </g>
      </g>
    </svg>
</div>