SVG - 二次贝塞尔折线答案

【问题标题】：SVG - Polyline with quadratic bezierSVG - 二次贝塞尔折线
【发布时间】：2014-11-13 15:07:43
【问题描述】：

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

SVG

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

【问题讨论】：

标签： css svg

【解决方案1】：

如果您想绘制贝塞尔曲线，您需要使用<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>

【讨论】：

【解决方案2】：

试试这样的：

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

【讨论】：