Library To Generate SVG Path With Javascript?

I'm using Raphaël for my SVG rendering needs. But I find the Path syntax a little low-level. So does anyone know a nice wrapper/library for Javascript that allows something like

Solution 1:

I strongly recommend d3.js.

Creating a path that represents an hexagon and moving it 10px in each direction is as simple as this:

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)');

It uses selectors that work closely to those found in jQuery.

Quoting the author:

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.

Solution 2:

It may not be 100% complete, but this looks sort of like what you're looking for:

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