raphael

I have used raphael js for drwaing my flowchart in internet explorer 8. Now I want to export my drawing as image file. I found some answer but still confused what to do. Can anyone help me regarding this issue? A sample code would be great. Paul Sweatte Exporting to PNG or PDF would involve converting the VML2SVG using the stylesheets, the VML element, and transformNode , then converting the SVG to PNG using a AJAX request which posts the image to a script which creates the PDF or runs imagemagick and returns the result. The pseudocode is something like this: svg = vml.transformNode(vml2svg) $

I am seeing an annoying wobble in my animation, I have stripped out the code which contains the actual animation: var side = 400; var paper = new Raphael($(this), 100, side); paper.customAttributes.arc = function (xloc, yloc, value, total, R) { var alpha = 360 / total * value, a = (90 - alpha) * Math.PI / 180, x = xloc + R * Math.cos(a), y = yloc - R * Math.sin(a), path; if (total == value) { path = [ ["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] ]; } else { path = [ ["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y] ]; } return { path: path }; }; var arcWidth

I have the following piece of code in javascript that basically hide or show a Raphaeljs set when I click on it. It works perfectly well under Google Chrome, FireFox and Safari, but not at all under Internet Explorer. var paper = Raphael(document.getElementById('ADiv'), 450, 490); var group = paper.set(); var toxicRect = paper.rect(0, 0, 120, 60, 10 ); toxicRect.attr({"stroke-width": 1, "stroke" : "#3083BE", "fill" : "#D1DFE9"}); group.push( toxicRect ); var toxicRectText = paper.text(60, 25, "Toxic in air\nthrough inhalation"); toxicRectText.attr({"font-size": 12 }); group.push( toxicRectText

I am new to raphael. I wrote svg tag inside div. Please see this sample http://jsfiddle.net/dhana36/bvs6P/1/ Use the CTRL+ and CTRL- and you will find the difference. HTML: <div class="outer"> <svg height="640" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 640" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.625px;" class="stretchBar"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> Created with Raphaël 2.1.0 </desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs> <path fill="none" stroke="

i would like to know, which techniques should i use to apply svg filters to raphael paths? I know that raphael tries to be as much cross browser with IE it can, but i was wondering if there was a way to add the filters using javascript. I built a library to do this. You can do something like: var paper = Raphael("test"); var circle = paper.circle(100, 100, 50, 50).attr({fill: "red", stroke: "black"}); circle.emboss(); Have a look at a fiddle: http://jsfiddle.net/chrismichaelscott/5vYwJ/ or the project page: http://chrismichaelscott.github.io/fraphael It's quite possible to extend Raphaël to

Has anyone used .animateWith() in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find. I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here , and the lines in question are: var ticktock = Raphael.animation({ "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}, "100%": { transform:"R-20 " + x +