raphael

问题 i want to set an id to Raphael set because i want to display it after an event click. this is my set: var divResult = document.getElementById('printResult'); var space2Draw = Raphael(divResult, 1600, 900); var st = space2Draw.set(); st.push( space2Draw.circle(newXCoordinates, newYCoordinates, 20).click((function (valore) { return function () { window.open("index-point.html?id=" + (valore) + "&type=" + type + "&description=" + description + "&name=" + name); } }(valore))).mouseover(function ()

问题 I make a candlestick using two rectangles and making a set. Then I make 100 candlesticks and make that a set. When I try to move all 100 candlesticks, they either all move to one coordinate, or all move correctly, but the sticks all move to the edge of the candle. How can I move the whole set, but retain the inner transforms of the candlesticks? 回答1: It is possible to "append" or "prepend" transformations to a set of Raphael objects using the forms "...Tx,y" and "Tx,y..." respectively. In

问题 I have a KML file with placemarkers, each of which has polygon coordinates. I'd like to change the fill color of the polygons on the fly, depending on values I read in from a json file. My understanding is that Google caches kml files, so you can't easily change the fill color of polygons on the fly. So I'm trying to convert my kml polygons into svg paths so that I can use Raphael to place my polygons on my Google map. Then I can change fill colors with javascript. But how do I convert

问题 New to raphael.js, I'm looking for an explanation on how to do something like move planets around a sun in an orbit. I'm stuck trying to create a path and animate the movement of the circle around it. Thanks for any pointers in the right direction! 回答1: My friend @Kevin Nielsen is right, you'll want "getPointAtLength." There's a nice little Raphael function here that adds an .animateAlong() function, though it needs a little modification to work on circular objects. I stripped it to the

问题 http://justplay.thefa.com uses raphael and svg to create masks for background images. You can see them under find football near you. the first has the heading: "To play or not to play". These look great accross all desktop browsers and iOS 3. Why are the images upside down in iOS 4?? anybody have any idea? I've also created some simple examples at: http://the-taylors.org/teststation/raphael/v2.0/masks.html and http://jsfiddle.net/davetayls/5bWgX/1/ Thanks, been trying to work this out for

问题 I would like to progressively pixelate an image on a webpage and animate the pixelation as a transition. The pixelation would begin by using small pixels and the pixels would gradually become larger. Finally, the pixelation would reverse and then reveal a second image. I'm looking for an effect like the pixelate effect here - you need to select pixelate as the transition and then click the image. Yes, I could use that library but I already have a raphael canvas and am interested to know

问题 I have a small application where I need to generate textPath labels for arcs. I'm drawing the arcs via Raphael and that is working great. However Raphael has no support for textPaths. We can add them to the svg element via jQuery but they don't render for some reason. When I duplicate the dynamically generated code statically it renders fine. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600"> <desc>Created with Raphaël</desc><defs></defs> <a title="This is a test

问题 I'm doing an animated transform in Raphael (and Snap.svg, which does the same). If I apply a rotation to a basic element, it rotates normally as I would expect. However, if I already have a previous transform applied (even if its t0,0 or r0), the element seems to scale down and back up, as though it always has to fit in its previous bounding box or something. Here is an example fiddle var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });

问题 This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this. I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called. Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this: /

问题 I am building a user interface using Raphael JS. currently I have a .js script that draws out everything using Raphael JS 2.1 exactly as needed. However, because the drawing is driven by dynamic data it is highly likely that objects will overlap. Adding the d3.js Force Layout to the objects would cause them to scatter automatically so there is no overlap of various ux components. However I have not been able to apply the d3.js Force Layout to Raphael drawn SVG objects. I've created a basic