如何在不改变高度的情况下让 SVG 具有流畅的宽度？

Posted 2023-02-25

【中文标题】如何在不改变高度的情况下让 SVG 具有流畅的宽度？

【英文标题】：How to get an SVG to have a fluid width without changing its height?

【发布时间】：2018-08-17 18:59:31

【问题描述】：

我想完成两件事：

SVG 宽度动态缩放以占据容器宽度的 100%。

当容器的宽度发生变化时，SVG 要么被拉伸要么被弄脏（意味着用 svg 的路径绘制的波浪）

SVG 的高度保持固定为 760 像素。目前，如果您调整容器的大小，SVG 的高度会降低，这是不需要的。

.container 
  width: 100%;
  background: green;
  height: 760px;


svg 
 width: 100%;


svg path 
 width: 100%;

  <div class="container">
    <svg   viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"
        fill="purple"
      />
    </svg>
  </div>

【问题讨论】：

请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住，投票建议，元评论等。只需解释您的问题，并展示您尝试过的内容，预期的内容以及实际发生的情况。 Meta is here的规范讨论。

【参考方案1】：

我可能会使用 SVG 作为 div 的背景，您可以固定 div 的高度并将background-position 调整为顶部

.container 
  width: 100%;
  background: green;
  height: 760px;


.container>div 
  height: 100%;
  background: 
   url('data:image/svg+xml;utf8,<svg   viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"  fill="purple"/></svg>') top/100% no-repeat, 
    /*cover the bottom part with the same color*/
   linear-gradient(purple, purple) bottom/ 100% calc(100% - 20vw) no-repeat;

<div class="container">
  <div>
  </div>
</div>

你也可以减少代码只保留容器：

.container 
  height: 760px;
  background: 
   url('data:image/svg+xml;utf8,<svg   viewBox="0 0 1440 760" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"  fill="purple"/></svg>') top/100% no-repeat, 
    /*cover the bottom part with the same color*/
   linear-gradient(purple, purple) bottom/ 100% calc(100% - 20vw) no-repeat,
   green;

<div class="container">
</div>

【讨论】：

@AnApprentice 当然这是一个好方法！ :p ...好吧，我想说唯一的技巧是底部的渐变，以便在 SVG 小于容器时填充相同的颜色

@AnApprentice 代码也可以缩减为只保留容器，检查更新

【参考方案2】：

您可以尝试将preserveAspectRatio="none" 添加到svg 标签。这似乎与位置有点混乱，但可能是一个好的开始。

.container 
  width: 100%;
  background: green;
  height: 760px;


svg 
 width: 100%;


svg path 
 width: 100%;

  <div class="container">
    <svg   viewBox="0 0 1440 760" fill="none" preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg">
      <path
        d="M677.112 54.1657C400.36 -43.9336 110.391 13.291 0 54.1657V760H1440V54.1657C1301.02 95.0404 953.865 152.265 677.112 54.1657Z"
        fill="purple"
      />
    </svg>
  </div>