反向填充svg形状

Question

我想制作一个水平的S形曲线，在该形状的底部填充颜色。

当我使用二次贝塞尔曲线时，会得到想要的形状，但是当我应用填充颜色时，形状的内部就会被填充。 见下文

 <svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M0,30 Q100,0 200,30 T400,30" stroke="blue" stroke-width="1" fill="blue"/> </svg> 

然后，我尝试使用单个路径进行工作，这使我离得更近，但是我想反向填充第二条path ，但是我不知道该怎么做。 这是我的形状

 <svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M0,30 Q100,0 200,30" stroke="blue" stroke-width="1" fill="blue"/> <path d="M200,30 Q300,60 400,30" stroke="blue" stroke-width="1" fill="none" /> <rect x="0" y="30" width="200" height="30" fill="blue" /> </svg> 

如何在右侧曲线的底部应用填充颜色？

Answer 1

如果我对任务的理解正确，则需要在路径中添加三条直线（从曲线的末端向下30px，然后向左400px，然后向上30px，或仅完成路径）。 您可以在相同path元素的相同d属性中使用v ， h和Z命令：

 <svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M0,30 Q100,0 200,30 T400,30 v30 h-400 Z" stroke="blue" stroke-width="1" fill="blue"/> </svg>