raphael

I have created a circle in which I can choose two points along the circumference of of circle. I want to fill the portion between those two points. Demo If you see the demo, I want to fill the angle between two points. JS: (function (Raphael) { Raphael.colorwheel = function (x, y, size, initcolor, element) { return new ColorWheel(x, y, size, initcolor, element); }; var pi = Math.PI, doc = document, win = window, ColorWheel = function (x, y, size, initcolor, element) { size = size || 200; var w3 = 3 * size / 200, w1 = size / 200, fi = 1.6180339887, segments = 3,//pi * size / 50, size20 = size /

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 trying to decide on a graphics library to use. SVG seems to handle 80% of the functionality I need out of the box (shape storage, movement, rotation, scaling). The problem is that the other 20% (using clipping to create a new set of complex polygons) seems

how can i change path position with raphael js? it very strange that obvious way not working: var p = paper.path("some path string"); p.attr("fill","red"); p.attr({x:200,y:100}); //not working Use var p = paper.path("M10 10L90 90L10 90"); p.attr("fill","red"); p.translate(300, 100); I got it done using something like this: p.attr({path:"M10 10L90 90L10 90"}); user56reinstatemonica8 To move a path in Raphael 2.0+, set or animate the transform attribute using translate ('t'), like this: // animate someElement.animate({transform: ['t',100,100]}, 1000); // set someElement.attr({transform: ['t',100

I am brand new to Raphael and am really stuck, I would like to rotate a div and its contents, using a button, with Raphael. Ideally, I would like to have a smooth animation that goes from 0 degrees to -90 degrees when the button is clicked, then when the button is clicked again, the animation would reverse. I think I will change the id or class on mouse click so that I can use the same button for both animations. Would that be wise? I really would like some help please, my Sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit Many thanks in advance for any

I have a random set of points and want to create a smooth svg shape with raphaeljs. To connect the points I am using a catmull-rom-spline. The problem is that the point where the path is closed is not smooth. This is an example path out of my projcet: M125,275R 125,325 175,325 225,325 275,325 225,275 175,275 125,275Z I've also created a jsfiddle: http://jsfiddle.net/ry8kT/ Can this be achieved with catmull curves? If not, can you please give me an example how to get a completely smoothed shape? Much thanks in advance, McFarlane In your first example, the path started at 125,275 and was at 125

I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle. Example That's what it looks like (image inside) Problem Currently I'm using textPath + path combination to generate path and write on it. <svg> <defs> <path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" /> </defs> <text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text> </svg> I also tried Raphael library to manage it work, but

I have seen graphs in Flash & stuff that basically adapt nicely to whatever the size of the browser or flexible element they are inside of.... I'm not really too well versed with raphaelJS but can you do this, and if so, how? In raphaeljs, you can call .setSize on a Raphael object to update its size. To adapt to runtime changes in browser window size, you can respond to a window resize event. Using jQuery, you could do: // initialize Raphael object var w = $(window).width(), h = $(window).height(); var paper = Raphael($("#my_element").get(0), w,h); $(window).resize(function(){ w = $(window)

Does anybody have any experience with the Raphael.js SVG library? I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by css. var R = Array(); R[1] = new Raphael("level1", 408, 286); R[2] = new Raphael("level2", 408, 286); R[3] = new Raphael("level3", 408, 286); R[4] = new Raphael("level4", 408, 286); R[5] = new Raphael("level5", 408, 286); var attr = { fill: "#ccc", stroke: "#000", "stroke-width": 0.5, "stroke-linecap": "square", "stroke-linejoin": "miter" }; //