css 使SVG路径为100%宽度?

pvcm50d1  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(251)

我有一个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>
vc6uscn9

vc6uscn91#

使用一个viewBox()属性,不使用width和height。SVG将采用容器的宽度,在本例中:
第一个月
试试
<svg id="wave" viewBox="0 0 1440 365.38">
注:@enxaneta的原始答复

相关问题