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，或仅完成路径）。您可以在同一v元素的同一h属性中使用Z，d和path命令：

<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>

反向填充svg形状

1 个答案: