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

Answer 2

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

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

使用Javascript生成SVG路径的库？

2 个答案: