将 SVG 路径设为 100% 宽度？答案

【问题标题】：Make the SVG path 100% width?将 SVG 路径设为 100% 宽度？
【发布时间】：2019-09-14 21:12:07
【问题描述】：

我有一个 SVG 路径动画，它当前没有扩展 100% 宽度来填充屏幕。我尝试过使用 viewBox 和其他设置，但似乎没有任何效果。

SVG 确实扩展了 100% 的宽度，但路径没有。

检查笔：https://codepen.io/somestuff/pen/QPJXyb

.wave-container {
  transition: color .8s cubic-bezier(.2, .8, .2, 1), background-color .8s cubic-bezier(.2, .8, .2, 1), fill .8s cubic-bezier(.2, .8, .2, 1);
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 1900px;
}

html,
body {
  width: 100%;
  height: 100%;
}

.wave-container svg {
  position: relative;
  top: -150px;
  left: 8px;
  width: 110% !important;
}

 :not(svg),
 :not(foreignObject)>svg {
  transform-origin: 0px 0px;
}

.wave-container {
  align-self: end;
  width: 100%;
  background: blue;
  display: block;
  width: 100%;
  vertical-align: bottom;
}

.dVVMLq {
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 100%;
}

.wave-container svg path {
  fill: blue;
}

<div class="wave-container">
  <div class="Wave__WaveWrapper-o7bhc-0 wave-container"><svg id="wave" width="100%" height="150px" fill="none"> 
    <path fill="#e5e5e5" d="M 0 59.9547 C 307.185 122.808 534.699 46.5899 847.24 39.6827 C 1159.78 32.7756 1270.98 45.0236 1440 59.9547 V 351.955 H 0 V 59.9547 Z">
    <animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="10s" 
    values="M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z; M0 51.8168C277 169.163 433 131.471 720 51.8168C1007 -27.8372 1199 -5.83717 1440 51.8168V343.817H0V51.8168Z; M0 69.3411C342 69.3411 652 -51.313 994 25.687C1336 102.687 1354 103.687 1440 69.3411V361.341H0V69.3411Z; M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z&nbsp; ">
    </animate></path></svg></div>
</div>

【问题讨论】：

使用viewBox() 属性并且没有宽度或高度。 SVG 将采用容器的宽度，在本例中为 class="Wave__WaveWrapper-o7bhc-0 wave-container"。试试`
这确实有效！你应该给出最终的答案 Karl。

标签： css svg

【解决方案1】：

使用 viewBox() 属性，没有宽度或高度。 SVG 将采用容器的宽度，在这种情况下为 class="Wave__WaveWrapper-o7bhc-0 wave-container"。试试<svg id="wave" viewBox="0 0 1440 365.38" > -- @enxaneta 的原始答案

【讨论】：

这个答案的格式被破坏了。你能编辑修复吗？