CODEWITHSUNDEEP
javascriptsvgraphael
stephanos
stephanos

Reputation: 3339

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 this:

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

Upvotes: 3

Views: 5232

Answers (2)

Erik Dahlström
Erik Dahlström

Reputation: 60976

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

Upvotes: 4

Hilton Perantunes
Hilton Perantunes

Reputation: 576

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.

Upvotes: 6

Related Questions