我有一个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 ">
</animate></path></svg></div>
</div>
1条答案
按热度按时间vc6uscn91#
使用一个viewBox()属性,不使用width和height。SVG将采用容器的宽度,在本例中:
第一个月
试试
<svg id="wave" viewBox="0 0 1440 365.38">
注:@enxaneta的原始答复