SVG - 具有二次贝塞尔曲线的折线

Question

我想创建一个包含多个点和几条贝塞尔曲线的SVG路径。如果我添加贝塞尔曲线，则不会渲染SVG。我怎么能有几条bezier曲线？

SVG

<polyline points="0,50 Q0,20 101,40  404,50" 
  stroke="black"
  stroke-width="3" fill="none"> 
</polyline >

Answer 1

尝试这样的事情：

<svg height="180" width="500">
    <polyline points="0,50 0,20 101,40 404,50" stroke="black" stroke-width="3" fill="none" />
</svg>

Answer 2

如果要绘制贝塞尔曲线，则需要使用<path>元素。所以你的例子将成为：

<path d="M0,50 Q0,20 101,40"  
  stroke="black"
  stroke-width="3" fill="none"> 
</path>

现在，如果你想添加更多连接曲线，你会写：

<path d="M0,50 Q0,20 101,40 Q100,0 120,40"  
  stroke="black"
  stroke-width="3" fill="none"> 
</path>