raphael

I started using Raphael.js a few days ago and I'm really enjoying it. The only thing I haven't been able to figure out is how to get the "paper" or svg/vml tag to fill the browser window like an swf. See this example. Note the way the above example resizes with the browser window I was able to get the "paper" to resize with the browser window, but no luck getting all the vector graphics to adjust their size. Any feedback would be greatly appreciated. EDIT I tried a bunch of different routes with this. viewBox worked great but its SVG only. I just figured out how to do it using Raphael sets and

I'm working with Raphael.js to make cross-browser interactive vector graphics, trying to add a new feature with separate code to make the feature work in 'SVG mode' and 'VML mode'. My problem is, I can't see any way to inspect, debug, change or even see the defining properties of the actual IE VML output that Raphael creates. In SVG, it's easy - you just dig into the DOM with Firebug or Inspect Element and the SVG is right there with the right markup. In IE7 and IE8 in VML however, after hitting 'Refresh' in IE browser tools, there are lots of <shape/> entities - but they all claim to have

I am building an admin area using CodeIgniter 2, where the admin has the ability to add specific images that are "blank", when it comes to text overlay. When they upload the image, they should have a way of defining certain paths on which regular users can add desired text. Basically, this can be used for shirts, mugs...any type of custom printable surfaces. The paths need to support straight lines, bezier curves and circles. And one base image needs to support multiple paths. I used the Raphael JS library and SVG. Here is my current approach: I open up the base image in InkScape and draw a

I use the Raphael .mouseover() and .mouseout() events to highlight some elements in my SVG. This works fine, but after I click on an element, I want it to stop highlighting. In the Raphael documentation I found : To unbind events use the same method names with “un” prefix, i.e. element.unclick(f); but I can't get this to work and I also don't understand the 'f' parameter. This doesn't work , but what does?? obj.click( function() { this.unmouseover(); }); Ok, what you have to do is pass the handler function to the unmouseover request: // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10

I have a fairly large map consisting of Raphael paths which im trying to make accessible to some jquery ajax scripts to be populated. I've tried to add an ID or anything to make it accessible from jquery in an organized fashion. As im new to Raphael I cant figure out a good way of achieving this. I've tried using .data() to add an ID for each dot with say "seat_1","seat_2" and so on but been unsuccessful so far. how would I go about organizing this code so I could manipulate it by looping? I realize that its a fairly open ended question but any suggestion is much appreciated Demo here: http:/

I'm using Raphael for drawing some elements on a website. The elements include rectangle, line (path). I have given an id to the path element and trying to access it in the onclick event of that line. but when I do an alert of the id, nothing is visible. Following is the code snippet function createLine() { var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight); t.attr('stroke-width','3'); t.attr('id','Hello'); t.node.onclick = processPathOnClick; } function processPathOnClick() { alert($(this).attr("id")); } Can anyone please tell me what is the problem with the

This question already has an answer here: svg: generate 'outline path' 3 answers I want to convert a stroked path to a filled object. (Programmatically, in JavaScript.) The line is just a simple curved line, a sequence of coordinates. I can render this line as a path, and give it a stroke of a certain thickness... but I'm trying to get a filled shape rather than a stroked line, so that I can do further modifications on it, such as warping it, so the resulting 'stroke' might vary in thickness or have custom bits cut out of it (neither of these things are possible with a real SVG stroke, as far