如何使用svg.js绘制弧

Question

使用svg.js我想用arc绘制路径：

M75,0 L75,118.85 A30,30 0 0 0 640,660.15 L568.5690264688633,781.8607965826662 

我尝试过所有事情（差距，逗号......），但没有成功。仍然有错误：

Error: Problem parsing d="M 50 0 L 50 108.8499984741211 A 660.3822631835938 199.75233459472656 L 631.133056640625 133.80345153808594"

提前多多感谢。

Answer 1

有一个插件https://github.com/otm/svg.path.js，它提供了一个更简单的界面来创建路径。使用插件，您可以写例如：

var draw = SVG('drawing').size(800, 800);
var path draw.path().M(10, 10).L(20, 20)

以下是插件的一些示例：http://otm.github.io/svg.path.js/

svg.js中还有一个名为path array的新功能：

https://github.com/wout/svg.js#svgpatharray

Answer 2

就个人而言，我对svg.js没有任何经验，但我有Raphaël.js。 Raphaël是一个小型JavaScript库，可以简化您在Web上使用矢量图形的工作。它有很好的文档和示例。

在Raphaël.js中使用路径很简单，以下是您的工作方式：

var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90

您可以通过两种方式编写路径：

1. 以空格分隔的坐标

   "M10 10L90 90"

2. 用逗号分隔的坐标

   "M10,10L90,90"

以下是路径的一个小例子：

r = Raphael("holder", 100, 100);
r.path("M10,10L90,90");

它只是画了一条线。