提问人：Ping 提问时间：12/14/2019 最后编辑：TomerikooPing 更新时间：8/9/2021 访问量：1390
在 CSS 中创建多层 SVG 波
Creating multi-layered SVG waves in CSS
问：
我正在尝试在这样的网站上创建波浪效果，其中有一个主色波浪（深紫色），然后是沿边缘的浅色波浪。我尝试过使用 CSS position 和 top 定位多个路径，但无法让它们工作。
这是我的基本波浪：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path class="green" fill="#0b5b41" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,186.7C480,192,600,224,720,245.3C840,267,960,277,1080,250.7C1200,224,1320,160,1380,128L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>答：
3赞
Alexandr_TT
12/14/2019
#1
Mybe Soo（米贝索酒店）
三个独立的波浪。每个波浪的颜色可以根据自己的喜好进行选择。
该应用程序响应迅速，在所有现代浏览器中看起来都一样
.w1 {
fill:#0E7452;
opacity:0.4;
}
.w2 {
fill:#0E7452;
opacity:0.7;
}
.w3 {
fill:#0B5B41;
}<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 320" version="1.1">
<path class="w1" d="m-1.2 155.9c0 0 45.8-1.8 68.7-0.8 96.9 4.3 213.1 15.7 289.6 28.9 120 19 241.7 41.5 361.7 62.8 120 21.7 269.8 29.2 389.8 2.9C1228.6 222.9 1320 108 1380 76l60-32v224l-60 52-293-1.1H734L363.5 317.2 75.8 322.4 0 268c0 0-1.2-81.2-1.2-112.1z"/>
<path class="w2" d="m-1.2 186.8c0 0 45-1.1 67.5-2 190.8-7.9 184.4-4 297.5 2 120 5.3 241.2 42.3 361.2 63.6 120 21.7 245 23 365-3.3 120-26.7 194-95.4 290.1-145.1 20.1-10.4 60-32 60-32V294H1380 1080 720 360 60 0Z" />
<path class="w3" d="M0 224 60 213.3C120 203 228.9 182.5 348.9 188.2 468.9 193.5 600 224 720 245.3 840 267 960 277 1080 250.7 1200 224 1320 160 1380 128l60-32V320H1380 1080 720 360 60 0Z" />
</svg>评论
1赞
enxaneta
12/14/2019
这是应该如何做到的。只是一个观察：你可以简化很多 d 属性。对于我会使用的相同曲线d="M0,224 C120,203,240,181,360,186.7 C480,192,600,224,720,245.3 C840,267,960,277,1080,250.7 C1200,224,1320,160,1440,96 V320H0Z"
0赞
Alexandr_TT
12/14/2019
@enxaneta我认为 OP 更容易有三条路径，这样每条路径都可以涂成不同的颜色
0赞
Alexandr_TT
12/18/2019
@Ping 如果答案对您有用，请不要忘记标记。
评论