Question

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

Answer 1

使用viewBox（）属性，并且不包含宽度或高度。 SVG将采用容器的宽度，在这种情况下为class =“ Wave__WaveWrapper-o7bhc-0 wave-container”。尝试使用<svg id="wave" viewBox="0 0 1440 365.38" > -@enxaneta的原始答案

使SVG路径的宽度为100％？

1 个答案: