raphael

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 ages... i'm completely baffled I came across the same issue. Apparently iOS uses a different coordinate

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 entry"> <path fill="none" stroke="#1e79a0" d="M395.2627944162883,355A110,110,0,0,1,199.5099996593139

I'm pretty new at SVG and Raphael, but I've been using Illustrator for many years, so I have some assumptions on how it works. I want to combine two paths which should return a single element. I need to make a speech bubble, but it could be anything really. In this case I tried to make two rect , one with round corners and another square rect which was rotated. It looked alright, but when I tried to move the speech bubble, the rotated element moved in the wrong direction, because of the 45 degree rotation. How can I compbine paths which I can later manipulate as if it was a single element/path

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" }); r1.transform('t0,0'); // any transform leads to shrink on rotate... r1.animate({ transform: 'r90,50,50'

I'm trying to make a triangle that has rounded corners. The triangle will look like this: The bottom left corner is the only one that seems fairly easy to make, mostly because that is a 90 degree 'turn'. That turn is made using the Q command in SVG with the following parameters: Q x,y + height, x, y + height - RADIUS starting at the right bit of the arc I'm creating. However, the other corners are variable, depending on the triangle size. I can calculate their angles using atan() functions, but I have no clue how to implement them. I would like it to follow the RADIUS variable (5 in this case)

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: // Get the path node as a jQuery object. pathNode = $(path.node); // Set the title so it's available to