无法使用 svg.draw.js 绘制路径答案

【问题标题】：cant draw a path using svg.draw.js无法使用 svg.draw.js 绘制路径
【发布时间】：2017-07-27 14:56:27
【问题描述】：

我正在使用svg.js 和svg.draw.js 制作一个非常简单的设计工具，其中用户还可以使用线条、折线、矩形和手绘图进行简单的设计。 svg.draw.js 是 svg.js 的扩展，允许用鼠标绘制元素。

现在让我们看一个非常简单的例子。如果我们想使用 svg.js 制作任何形状（例如折线），我们只需这样做：

var draw = SVG('drawing').size(300, 300)
draw.polyline('0,0 100,50 50,100').fill('none').stroke({color:'blue'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script>
<div id="drawing">
</div>

为了通过鼠标绘制这条折线，我使用了 svg.draw.js。很简单，我们只需要在上面sn-p的末尾加上这个扩展的draw()函数。此外，我们也不必在 draw.polyline() 函数中提供任何参数。

var draw = SVG('drawing').size(300, 300);
draw.polyline().fill('none').stroke({color:'blue'}).draw()

通过在末尾包含 svg.draw.js 库和 draw() 函数，您将能够通过鼠标创建多段线。对于演示转到此link。

问题： 现在您可以看到，通过添加draw()，我们可以通过鼠标点击创建所有svg elements。通过使用相同的策略，我想做手绘。我正在使用 path svg 元素，但它对我不起作用。

draw.path().stroke({color:'blue'}).draw()

上面一行给出了这个错误：

如果 svg.draw.js 支持矩形 (draw.rect())、折线 (draw.polyline()) 等，那为什么不支持路径呢？我想创建类似this 的东西，但是这个免费的手绘 sn-p 在 d3.js 中我想用 svg.draw.js 来做。任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

您只能通过鼠标绘制线条、矩形或圆形等，正如您在使用此库时提到的。 svg.draw.js 不要有类似Draw.path()的东西。

【讨论】：