当前位置：文江博客话题详情

SVG 高度未按预期运行

发布于 2025-01-20 11:03:20 字数 1628 浏览 5 评论 0原文

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

应该发生的事情

应该占据灰色框中的更多垂直空间。似乎它不使用object-fit：cover。

实际上，它应该像一个边界盒一样遵循盒子的大小。

我尝试将远距离

设置为100％
设置的对象拟合以
确保有一个Viewbox
确保没有其他宽度和高度

示例，

它表明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>

原文

Not that it matters but I'm using https://getwaves.io/ to generate an SVG image.

What should happen

The blue waves should take up much more vertical space in the gray box. It seems like it does not use object-fit: cover.

In fact, it should follow the size of the box, like a bounding box.

What I've tried to far

Set height and width to 100%
Set object-fit to cover
Made sure there is a viewbox
Made sure there are no other width and height

Example

It shows that an JPG image works fine but not the SVG image.

Question

How can I fix it?

.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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

灰色世界里的红玫瑰 2025-01-27 11:03:21

首先，您可以在上使用属性 preserveAspectRatio="none"。如果您指定高度和宽度，这将拉伸 SVG。
其次，你的路径被放置在 y 轴下方大约 200 处。因此，当它拉伸时，路径上方的透明区域也会占用更多空间。我移动了路径，使其几乎到达顶部的 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>

First of all you can use the attribute preserveAspectRatio="none" on <svg>. This will stretch the SVG if you specify a height and a width.
Second you path was placed around 200 down the y axis. So, when it stretched, the transparent area above the path would also take up more space. I moved the path so that it almost hits y=0 on the top. Now the path only takes up 113 in the height and when stretched it will fill up the entire box.

I used SvgPathEditor to edit the path.

.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>

回复收藏 0 原文

~没有更多了~