如何使用svg.js绘制弧

时间:2014-02-11 15:52:20

标签: javascript html svg svg.js

使用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"

提前多多感谢。

2 个答案:

答案 0 :(得分:4)

有一个插件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

答案 1 :(得分: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"

  3. 以下是路径的一个小例子:

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

    它只是画了一条线。