raphael

How to create gradient object with Raphael

Hi, I was trying to use Raphale JS graphics library. I would like to use the attribute gradient which should accept an object. Documentation says to refer to SVG specs. I found the gradient object in SVG, for instance <linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="5%" stop-color="red" /> <stop offset...

jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and Javascript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know (1) what the trade-offs are between the two, and (2) where the development momentum seems to be. I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm prima...

Events work in Firefox/Chrome but fail in IE

I've just built an SVG map of New Zealand for use with the excellent javascript library Raphael, but unfortunately have stumbled upon what I can only imagine is a bug or syntactic variation in IE's javascript interpreter. In Firefox and other browsers the onlick and onmouseover events work perfectly - however they do not fire in IE (tes...

Painting shapes in Javascript

Is there any good alternative to the html5-element canvas to paint shapes like hexagons using javascript, that works cross-browser (including the horrible IE6)? I have been using jQuery and jQuery maphighlight for this, but it doesn't give me enough possibilities to manipulate the shapes and colors after it's first rendered. Am I missi...

How to animate a Raphael object along a path?

The object could be simple, a rect or circle. But the path should be a bezier curve. Please provide javascript/Raphael code if not too much trouble. It will be nice if there is trailing effect of the moving object during annimation. Thanks, ...

Scaling a fill pattern in raphael.js

paper=Raphael('previewBody',480,480); paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z') .attr('fill','url(bg.png)')) .scale(.5,.5,0,0); My problem is the fill is not scaled with the svg canvas, so proportionally, it ends up as twice the size it was before the scale of the path. Is there any easy way to scale the fi...

Simplest way to clear a container using raphaeljs javascript graphical library

I have to clear and redraw a raphael javascript main container. I've tried with var paper = Raphael(10, 50, 320, 200); paper.remove(); // Doesn't work paper.node.removeNode(); //this neither paper.removeNode(); //this neither Any idea? ...

raphael text() in IE8

Hi All, Trying to get Raphael JS to work with IE8. I am using the text() function to draw some text, which works perfectly in FF3 and Chrome, but not in IE8 (neither compat nor regular IE8). Other drawing stuff works well in IE8, so I'd guess I am missing some stupid minor detail on how to render text in Raphael. Oh and this is thei...

Using Raphael JS to float shapes around the screen

I am working on having some shapes floating around the screen at random. Eventually they will interact with each other, as well as have onclick functions. I can get the circles to render on screen, but I cannot get them to have motion. It seems that the .animate() function is not what I need here. Does anyone know how I would go abou...

Animation: jQuery or Raphael?

I am building a page that will animate objects (image/shape/div) and float them around the screen. At times there may be a large number of objects floating and interacting. A requirement is to have data associated with each object, as they will each have an id. So, if I click one object, it can grab that ID, then reference an array th...

Using Raphael JS to create text nodes

I built some shapes using Raphael, and now I wanted to put some text into them. But, it seems, from the examples, that a text node can only be attached to the paper and not svg shapes? Is it possible to create multiple shapes with different text inside? The example I was using was: paper.text(50, 50, "Raphaël\nkicks\nbutt!"); ...

Help with structuring a javascript visualisation application

I'm using http://raphaeljs.com/ to draw some vector graphics on a canvas element on the page. I want somehow to update the graphics on the page in realtime as events happen on another website i'm running. For example, when someone uses the search facility on the other site, I want this to be represented on my canvas. Its a sort of ev...

Mobile Safari SVG rendering issues with raphaeljs

I am working on an animated, interactive graph using raphael that I need to work well on the iPhone. I have 2 minor rendering issues that I'm struggling with. The first is that whenever you click on an svg element that has a click handler attached, mobile safari draws a transparent gray box around it to indicate what was clicked. It's t...

Raphael JS Tutorial

My first impression on Raphael JS is so tempting, where should I go to learn more, other than its website? ...

Support for Raphael Javascript library in Netbeans

According to this blog post, Netbeans's supposed to support Javascript type inference. And Javascript support should be built-in to the Netbeans editor. However when I add an HTML file to a simple Java project, and include the Raphael javascript library using <script src="..."/> it seems that Netbeans does not recognize the library. Even...

Handle User Input with Raphael

I'd like to write a simple game using the Raphael javascript library, but one question is sticking in my mind. How does one handle keyboard input? I've looked through the reference material and haven't found any reference to this. Can you simply pass it the standard JavaScript keypress methods? ...

Troubleshooting Raphael translation animation

Hi, I'm attempting to use Raphael to make a small game, and just want a bit of advice on some code I'm working on. Here's what I have so far, its just a simple example of moving a circle around the screen: <script type="text/javascript" charset="utf-8"> window.onload = function () { var paper = Raphael(10, 50, 320, 200); var paper ...

Where does come the offset in Raphael javascript

I really like the Raphael Javascript library which is very useful for handling SVG with javascript. However there is an offset value which is added to the generated svg code that I don't understand. Does anybody know where does it come from and how to avoid it? Here is my JS code: var paper = Raphael("canvas", 510, 510); paper.clear()...

problem drawing gRaphaeljs pie chart

Hi, I was trying to draw the raphaeljs piechart. I used the same example as shown on "http://g.raphaeljs.com/piechart2.html". It renders me the text but the pie charts goes missing.Can someone please help? please find the code below. g·Raphaël Dynamic Pie Chart Demo ...

svg: center of path

Hi I'm trying to draw a label on a polygon of an svg file. The problem I'm facing is to find out roughly the center of this polygon to place the label, as the path's coordinates are in svg format and need to be parsed. Is there an easier way to determine the center of an svg polygon (maybe someone can point out a javascript library or a...