使用Javascript生成SVG路径的库？

Question

我正在使用Raphaël进行SVG渲染。但我发现Path语法有点底层。

那么，有没有人知道一个很好的JavaScript包装器/库，可以允许像这样操作：

var pathStr = move (10, 10).draw (5, 5)
var path = paper.path(pathStr)

- stephanos

Answer 1

我强烈推荐使用d3.js。

创建代表六边形的路径并在每个方向上移动10px就像这样简单：

var svg = d3.select('body')
    .append('svg:svg')
    .attr('width', 1000)
    .attr('height', 1000);

svg.append('svg:path')
    .attr('d', 'M' + [
        [850, 75], [958, 137.5], [958, 262.5], 
        [850, 325], [742, 262.6], [742, 137.5]
    ].join('L') + 'Z')
    .attr('transform', 'translate(10, 10)');

它使用与jQuery非常相似的选择器。

引用作者的话：

D3不提供新的图形表示方式-不像Processing、Raphaël或Protovis，没有需要学习的新标记词汇。相反，您直接构建在CSS3、HTML5和SVG等标准之上。

- Hilton Perantunes

Answer 2

这可能不是100%完整的，但它看起来有点像你正在寻找的内容：

https://github.com/DmitryBaranovskiy/raphael/blob/cuttingedge/plugins/raphael.path.methods.js

- Erik Dahlström

---

有没有可能得到一个新的链接？ - Charlie Schliesser