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 this:
var pathStr = move (10, 10).draw (5, 5)
var path = paper.path(pathStr)
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.
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
