raphael

I have an SVG file that I would like to display via Raphael (each svg file is a node in a tree I'm trying to draw, the actual connections of the tree will be made by raphael). I tried something like: var vector_image = paper.image("test.svg", 50,50,50,50); but no dice, seems only "real" image files like png or jpeg are accepted? I find this very strange as Raphael itself uses Scalable Vector Graphics. Is there anyway (short of parsing the SVG files into javascript snippets and pasting them into the html document) to display existing SVG files using Raphael (or any other vector based javascript

I am trying to create some buttons with text in javascript using the Rahpael library. I would like to know the size of the styled text, before drawing to avoid that so I can create proper background (the button). Also I would like to avoid drawing the text outside of the canvas/paper (the position of the text is the position of its center). I can use Raphaels getBBox() method, but I have to create (draw) the text in first place to do this. So I draw text to get the size to be able to draw it on the right position. This is ugly. So I am searching for some general method to estimate the metrics

I'm using raphaelJS to draw a "radar chart" to display statistical data. For each axis it should accept values between 0 and 10. For example, the vales of a polygon with its center point right in the center of the chart [10,10,10,10,10]. Simple... However, it might happen that data looks like this: [26, 14, 48, 18, 1], [ 3, 14, 8, 9, 5], [10, 6, 4, 16, 3] which leads to this (displaying the polygon with its center point in the bottom left off the chart): If I would normalize data based on its biggest value (in this case 48), all of the other center points would be too near to the center the

My aim is to create identify a piece of code that increments a number by 1, every 1 second: We shall call our base number indexVariable, I then want to: indexVariable = indexVariable + 1 every 1 second; until my indexVariable has reached 360 - then I wish it to reset to 1 and carry out the loop again. How would this be possible in Javascript? - if it makes a difference I am using the Raphael framework. I have carried out research of JavaScript timing events and the Raphael delay function - but these do not seem to be the answer - can anyone assist? You can use setInterval() for that reason.

UPDATED QUESTION I've updated this to be a little more succinct..: In this fiddle: http://jsfiddle.net/pX2Xb/4/ I have some raphael code that draws 3000 circles to a page. It then attempts to animate all circles at once (changes fill colour) over 10 seconds, which results in a clunky visual animation. Change the number of circles to 20 to see a much smoother animation for comparison. My questions are (a) is it possible for me to make the update to the 3000 elements smoother and (b) if so, what does the code to do that look like? Some notes: I'm willing to take a small timing hit if there's

I've come to a conceptually difficult problem. In short, I need to find the vector path of two vector paths combined through different boolean operations. Such as the Union, the Difference, the Intersection, and Subtraction. It would be nice if I could do it similar to how Canvas does it's globalCompositeOperation. How in the world would I go about doing this? There is a JavaScript library that allows for boolean operations on SVG paths under the condition that the path is a polygon. Using a high enough sampling, the beziers can be polygonized to such a high quality that the visual result is

I am using the Raphael Javascript library to do some rudimentary drawing for a web page. I am just drawing some lines that radiate out from a point. In Chrome, Firefox, and Opera, these lines are subject to the size of the SVG canvas. This is the desired behaviour, because I want to draw a ray as long as I want but I do not want it to affect the size of the page. If I draw a 5000px wide box, only the part inside the canvas will be visible. However, Internet Explorer (surprise surprise) completely ignores the size and bounds of the canvas and accommodates whatever is drawn. So if I draw a