2

I have an html element (to allow dynamic text wrapping and resizing) layered over the top of a Raphael generated SVG element.

The problem is that I have events assigned (mousedown, mouseup etc...) to the SVG element beneath the html. The SVG element itself is actually dragabble and scaleable via the raphael.freeTransform plugin.

of course, with the html over the top this element no longer picks up the events.

I am looking for some way around this but really don't have an idea where to begin. The solution must be cross browser compatible so the new featureset in some of the modern browsers which allows an element to ignore clicks is not an acceptable solution.

Note: I have tried all manner of achieving the same functionality by rendering the text in SVG itself but there really is no way of emulating exactly what I want to do in a dynamic fashion (i.e text resizes and wraps as the user types)

The only solution I can currently think of is to somehow use foreignObjects but alas Raphael has no support for them unless anyone is aware of a plugin?

gordyr
  • 6,078
  • 14
  • 65
  • 123
  • For me, it's hard to completely understand the context of your problem. I'd recommend putting together a jsfiddle with an example/resproduction of your issue. – dwerner May 03 '12 at 03:43

1 Answers1

4

You are looking for something to the effect of the css pointer-events. It's a mozilla hack which was later added to webkit, and is not supported by IE. It allows you to prevent a layer from intercepting the mouse events. There are ways to get it to work cross-platform (I believe Modenizr supports it, but don't quote me on that). Alternatively consider this:

css 'pointer-events' property alternative for IE

Community
  • 1
  • 1
Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • Fabulous! I knew about pointer-events but didn't realise there was actually a cross browser version available! cheers – gordyr May 03 '12 at 12:16