Question

为什么在SVG元素上设置viewbox属性会弄乱高度并导致溢出？我该如何防止这种情况？

＆＃13;

.parent {
  width: 500px;
  height: 500px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
  background-color: yellow;
  margin: 10px;
}

＆＃13;

<div class="parent">
  <h1>testa</h1>
  <div class="child">
    <svg viewbox="0 0 40 40">
      <rect x="10" y="10" width="30" height="30" fill="red" />
    </svg>
  </div>
</div>

＆＃13;

Answer 1

由于您正在定义身高（通过flex-grow: 1;），因此您可以使用绝对定位来帮助您填充.child的高度。

.parent {
  width: 500px;
  height: 500px;
  background-color: green;
  display: flex;
  flex-direction: column;
}

.child {
  position: relative;
  flex-grow: 1;
  background-color: yellow;
  margin: 10px;
}

svg {
  position: absolute;
  height: 100%;
  background-color: rgba( 0, 0, 0, 0.25); // <= for illustrative purposes
}

<div class="parent">
  <h1>testa</h1>
  <div class="child">
    <svg viewBox="0 0 40 40">
      <rect x="10" y="10" width="30" height="30" fill="red" />
    </svg>
  </div>
</div>

我相信有一个object-fit解决方案，但浏览器支持可能不是您需要的。

SVG ViewBox突破高度

1 个答案: