Hi, I'm trying to show multiple polygons as SVG image on a div using Raphael. Although, I've set up the size for the div Raphael gets as an argument to create the paper object, the size of the div element is not respected and the image is drawn outside of the div boundaries (which I somehow understand, as the polygon coordinates go beyo...
I'm using the Raphael library to draw some shapes, and then animate them into view within the browser. Is there any way I can check when one of these animations is complete in order to then trigger another function? ...
Hi there I'm programming a debate-graph for my bachelor thesis with Raphael JS. point is, users can add nodes to the graph. eventually the graph gets really big and the canvas is still the same size. the canvas (in raphael js: paper) is inside another div with "overflow: scroll;", so lets ignore screen real estate so is there a way tha...
Hi, I'm using the Raphael library to create SVG objects. To initialise the SVG shape and create a canvas for everything inside, I've used the following line as stated in the documentation: var paper = Raphael(10, 50, 320, 200); I now want to animate the paper and everything inside it, just like I would animate a shape which had been...
Hi, I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document. Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width of the box which will itself force the line breaks (I can't find any evidence of thi...
Hi, I'm using the Raphael library and trying to animate the opacity of a rectangle from 0 to 1. Here's the code I've written: this.myRect.attr( 'opacity', 0); this.myRect.animate({opacity: 1}, 1000); This does not work, and I believe it's the animation line which is incorrect as I can set the initial attribute to a lower val...
In inkscape the coordinate system is bottom/top corner (meaning, 0,0 is left bottom corner). This is the same case with Adobe Illustrator. But, when I try to use this path string in raphael it use top/bottom (meaning, 0,0 is top/left corner) approach. How to convert this path string according to browser's coordinates or raphael's coordin...
I'm writing an app for shape manipulation, such that after creating simple shapes the user can create more complex ones by clipping the shapes against each other (i.e. combining two circles together into a figure 8 stored using a single path rather than a group, or performing intersection of two circles to create a "bite" mark), and am t...
Hi, is it possible to use Raphael to manipulate an embedded svg? I used Raphael in the past to draw shapes, but haven't actually seen it being used to manipulate an existing svg image. If not, is there anything else that allows me to easily change colours, add events, etc to polygons of an embedded svg? Cheers, Max ...
Hi, I'm trying to build a puzzle game in javascript, using raphael to take care of the drag and drop and rotation of the pieces. The problem I'm facing is: Whenever I rotate an image, its coordinate system is rotated as well and the drag and drop doesn't work anymore as expected. Edit2: Here is a simple test case. Drag around the elli...
I am creating a diagram application in which I hide and show few elements e.g. var c = paper.circle(10, 10, 10); c.hide() var c2 = paper.circle(10, 10, 10); c2.show() Now I want to act upon such shapes e.g. calculate bounding box etc but I am not able to find how to get if shape is hidden or not? Is there something like this shape.is...
Hello there, I have an issue using $.position to retrieve the relative x/y offset on an element. It was mentioned before that both Safari and Chrome differ in handling it as the others. I'm using Raphael-JS. To cut the long story short, what I have is an SVG element wrapped by the parent, centered DIV wrapper: <div> <svg> ...
IE appears to be choking on the following line 2207 from the uncompressed raphaeljs 1.4.7 (in the context of my code, of course): gs.left != (t = left + "px") && (gs.left = t); I'm unfamiliar with the != syntax in this context so I'm finding difficult to figure out what is going on or why IE might be unhappy about it. I've tested in I...
I've been playing with Raphael trying to create a combination of two of his example charts. The first being http://raphaeljs.com/analytics.html which I have working properly, now I'm adding in some elements from http://raphaeljs.com/chart.html as my chart will be a monthly report. I have the forward/back buttons drawing correctly at th...
So the short version, what I don't understand is this line of code: (new Function("paper", "window", "document", cd.value)).call(paper, paper); The long version, look at these functions: window.onload = function () { var paper = Raphael("canvas", 640, 480); var btn = document.getElementById("run"); ...
paper.rect(0, 0, settings.width, settings.height, settings.radius); Creates a nice rectangle with rounded corners. Is it possible to create a rectangle with just one round corner? ...
I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent). According to the W3 path spec: Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects. Can somebody please give a ve...
Hi, I've recently started to use gRaphael for my graphing needs and am pretty impressed so far. However, I have run into some difficulty when producing line graphs, specifically that when I attempt to set the values for the X axis to dates, the graph fails to render. My code to generate the graph is: <script type='text/javascript' c...
Hi I'm trying to use Raphael to create a map tool similar to this example in the webpage. I have an svg file of the map I want to use, and the provinces are all separate paths in the file. However, if I copy the coordinates form the svg file directly to a raphael path, the image is too large to fit the screen and therefore I need to sc...
I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to: Upon mouse click, pull out the alpha of the current position. or Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html) ...