raphael

I need to do something along the lines of this , but I with Snap.svg and with the ability to: Drag the entire group along the path Preserving spacing during the drag Allow group drag from any group item Support any number of group items Support various different shaped paths I started this jsfiddle as a working starting point (and also posted below), but I'm at a loss at how best to attack the problem. var paper = Snap('#panel'); var path = paper.path('M44.16,44.16 L44.16,44.16 L73.6,14.719999999999999 L132.48,73.6 L14.719999999999999,191.35999999999999 L132.48,309.12 L103.03999999999999,338

I have implemented pointer-events: none on a Raphael element using jQuery like this: var raphaelElement = Raphael.ellipse(x,y,w,h); $(raphaelElement.node).css({'pointer-events': 'none'}); This works fine but of course in IE8, Raphael uses VML instead of SVG and this solution fails. Does anyone have another solution to essentially make a Raphael element ignore events. Phrogz The only way to make this work for IE8 (and earlier) would be to actually catch the event, and in the event handler: hide the element ( .style.display='none' ) use the elementFromPoint() method to find the next element

I'm trying to use Raphael JS, but jQuery selectors don't seem to work with Raphael JS in IE8. In Chrome and Firefox this works: var paper = ScaleRaphael("test", 500, 500); var c = paper.circle(50, 50, 40); c.node.setAttribute('class','bluecircle'); $('.bluecircle').attr({fill: 'blue'}); But in Internet Explorer (IE8, which uses VML instead of SVG) nothing is shown. Basically what I'm trying to do is to give each object a class, so I can use Jquery selectors to manipulate all objects at once that have a certain class... Does anybody know a way how to do this, that also works in IE ? This is not

I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful. For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set. When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately. Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I want that all the rectangles in the same set (set = horizontal groups of 10 rectangles), change the

I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work around? Adding a link to Raphael.blur in a separate answer, per the OP's request. http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js Updated code sample: var shadow = canvas.path(p); shadow.attr({stroke: "none", fill: "#555", translation: "4,4"}); shadow.blur(4); var shape = canvas.path(p); Note that in Dmitry's comments he mentions that there is no WebKit support. He uses the <filter> element and

The object could be simple, a rect or circle. But the path should be a bezier curve. Please provide javascript/ Raphael code if not too much trouble. It will be nice if there is trailing effect of the moving object during annimation. Just in case you are trying to use this with RaphaelJS 2 (animateAlong doesn't exist anymore), here you can see a possible solution: http://jsfiddle.net/gyeSf/17/ . And here the original discussion: https://groups.google.com/forum/#!searchin/raphaeljs/animatealong/raphaeljs/W9bA0SkArVY/KnPRKi8uFrsJ Edit: And here another example: http://raphaeljs.com/gear.html