我目前正在尝试创建波浪动画，但是我不知道如何使路径元素的宽度适合 SVG 宽度。 SVG 宽度为视口(viewport)的 200%，路径元素宽度为 100%。但是我希望路径元素也有 200% 的宽度，这样动画适合整个屏幕。
https://jsfiddle.net/r8o9gjsk/1/
或
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner">
<div class="wave waveMiddle">
<svg width="100%">
<path width="100%" height="100%"
d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
</svg>
</div>
</div>
</div>最佳答案
您在 svg 上缺少 viewBox 参数
只改变了viewBox:
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveWrapper {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.waveWrapperInner {
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
bottom: -1px;
}
.wave {
position: absolute;
left: 0;
width: 200%;
height: 100%;
background-repeat: repeat no-repeat;
background-position: 0 bottom;
transform-origin: center bottom;
}
.waveMiddle {
background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
animation: move_wave 10s linear infinite;
}<div class="waveWrapper waveAnimation">
<div class="waveWrapperInner">
<div class="wave waveMiddle">
<svg width="100%" viewBox="0 0 1600 200">
<path width="100%" height="100%"
d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
</svg>
</div>
</div>
</div>https://stackoverflow.com/questions/60132102/