使用Javascript生成SVG路径的库？

Question

我正在使用Raphaël来满足我的SVG渲染需求.但我发现Path语法有点低级.

所以有人知道一个很好的Javascript包装器/库,允许这样的东西:

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

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等标准.