如何使 <svg> 元素缩放到父元素的高度？

Question

我在包装元素中有一个 <svg> 元素。

我希望 <svg> 填充环绕元素的高度，但我似乎无法让它工作。

我尝试了以下方法：

.image-banner__overlay {
  height: 90%;
  position: absolute;
  z-index: 999;
}

svg {
  height: 100%;
  background-color: black;
}

path {
  fill: red;
  height: 100%;
}

<div class="cell small-12 medium-6 image-banner__image-wrapper">
  <div class="image-banner__overlay">
    <svg>
                <path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
            </svg>
  </div>
  <div class="image-banner__image" style="@backgroundImage">
  </div>
</div>

但是 <svg> 似乎只占 space 的最多 75%，例如：

我试过使用 viewBox，例如：

height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"

但这会使 SVG 太大（溢出父元素）。

有谁知道我怎样才能让它拉伸父元素的完整高度（而不把它变成 <img>）？

Answer 1

这是给你的视图框，我知道这很糟糕，但你应该 read up on it！

.image-banner__overlay {
  height: 90%;
  position: absolute;
  z-index: 999;
}

svg {
  height: 100%;
  background-color: black;
}

path {
  fill: red;
  height: 100%;
}

<div class="cell small-12 medium-6 image-banner__image-wrapper">
  <div class="image-banner__overlay">
    <svg viewbox="0 0 80 250">
            <path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
        </svg>
  </div>
  <div class="image-banner__image" style="@backgroundImage">
  </div>
</div>

如何使 <svg> 元素缩放到父元素的高度？

How can I make an <svg> element scale to a parent element's height?

html

css

svg