SVG 高度不符合预期

Question

这并不重要，但我正在使用 https://getwaves.io/ 生成 SVG 图像。

应该发生什么

蓝色波浪应该在灰色框中占据更多垂直 space。它似乎不使用 object-fit: cover.

事实上，它应该遵循框的大小，就像边界框一样。

我到目前为止所做的尝试

将高度和宽度设置为 100%
设置对象适合覆盖
确保有一个视图框
确保没有其他宽高

例子

这表明 JPG 图片可以正常工作，但 SVG 图片不行。

问题

我该如何解决？

.wrap {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg, img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Just the SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
  <path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>

SVG in a box - Does not work

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</div>

JPG in a box - Do work

<div class="wrap">
  <img src="https://placekitten.com/96/139">
</div>

Answer 1

首先，您可以在 <svg> 上使用属性 preserveAspectRatio="none"。如果您指定高度和宽度，这将拉伸 SVG。其次，您的路径位于 y 轴下方约 200 处。所以，当它拉伸时，路径上方的透明区域也会占用更多space。我移动了路径，使其几乎到达顶部的 y=0。现在路径只占 113 的高度，当拉伸时它会填满整个盒子。

我用SvgPathEditor编辑了路径。

.wrap {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg, img {
  height: 100%;
  width: 100%;
}

Just the SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
  <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>

SVG in a box - Does not work

<div class="wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
    <path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
  </svg>
</div>

JPG in a box - Do work

<div class="wrap">
  <img src="https://placekitten.com/96/139">
</div>

SVG 高度不符合预期

SVG height not behaving as expected

css

height

svg

object-fit

应该发生什么

我到目前为止所做的尝试

例子

问题