创建一个包含SVG问题的简单wave

Question

我正在尝试使用SVG创建一个简单的wave来放在我的网站上。这是我到目前为止所提出的：

<svg height="100" width="500">
  <path d="M 0 50 
           Q 125 0, 250 50, 375 100, 500 50
           L 500 100
           L 0 100
           L 0 50
           Z" stroke="blue" stroke-width="1" fill="red" />
</svg>

https://jsfiddle.net/a5q41t26/

问题在于我无法将路径的底部与下波的底部对齐以避免间隙。

任何帮助都将不胜感激。

Answer 1

Q路径命令中的两对中的第一个坐标对是控制点。曲线不通过控制点。

查看维基百科中的section on Quadratic bezier curves。