Обратная форма заполнения 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 вверх или просто завершить путь).Вы можете использовать команды 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>