javascript - 使用 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 does not provide a new graphical representation—unlike Processing, Raphaël, or Protovis, there is no new vocabulary of marks to learn. Instead, you build directly on standards such as CSS3, HTML5 and SVG.