raphael

I'm evaluating Fabric.js as an alternative to Raphael.js for creating interactive visualisations that are compatible with IE8, which doesn't support SVG or canvas (IE8 support is non-negotiable unfortunately). Raphael can be made to work with the visualisation library D3.js - which outputs SVG and is incompatible with IE8 - via the bridging library D34Raphael , a fork of D3 adapted for use with Raphael. D34Raphael adapts some (but not all) D3 features to output into Raphael's abstracted objects instead of the DOM, so that, on IE8, Raphael can interpret D3's output as VML. (edit Feb 2014 -

I want to apply or 'bake' a transformation of several paths in Raphael JS 2, so that I can then combine them into one single path. Here is an example path, where I would like the "transform" attribute to be applied to all the "d" coordinates. <path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,

I'm trying to convert a SVG generated by Raphael JS (and the user, since you can drag and rotate the images). I followed this Convert SVG to image (JPEG, PNG, etc.) in the browser but still can't get it. It must be easy but I can't put my finger on what I get wrong. I got my svg in a div with #ec as id and the canvas's one is #canvas . function saveDaPicture(){ var img = document.getElementById('canvas').toDataURL("image/png"); $('body').append('<img src="'+img+'"/>'); } $('#save').click(function(){ var svg = $('#ec').html(); alert(svg); canvg('canvas', svg, {renderCallback: saveDaPicture(),

How may I change the text in a RaphaelJS-created text node? First, I am creating a new element with a text string with Raphael, and at some later point I would like to change this text. It's easier for me if I do not have to reinitialize the element as there will be a whole host of attributes attached that will be a pain to recreate. Is there a way to do this? I've got my logic below, but it doesn't work; it's there just to provide extra insight as to what I'm trying to achieve. Thanks var R = Raphael("graph-o-matic", 1000, 1000); var title = R.text( 10, 10, 'original text'); ... title.text

I'm in the process of creating a little 'infographic' using raphael js. The infographic will render a number of circles with some text inside. The number of circles isn't know and will depend on the data it gets fed. I thought that I would organise the raphael objects into sets, one for each circle and then move those sets into one 'container' set but I am having trouble accessing them programatically using something like: console.log(ss[0].circle); Here is a snippet of the code im using to draw my circles/add them to a set: var r = Raphael('raph', '500px', '500px'); var coord = { '0': {x: 177

I'm trying to create a little free-hand drawing app, and to figure out a way to add path segments (e.g. "L10,10") to a Raphael path Element. This answer suggests that isn't possible. I've tried doing something like: var e = paper.path("M0,0L100,100") e.attr("path").push(["L",50,100]) ...which does alter the array returned by e.attr("path") but doesn't change the graphic, so I guess this isn't supported behavior. It looks like you have to call the setter version of .attr() to update the display. The following seems to work: var e = paper.path("M0,0L100,100"); e.attr("path").push(["L",50,100]);