Interaction between Edge Animate and RaphaelJS (or any svg library)

Question

Hello.
Edge Animate's possibilities are really nice as long as i'm working with anything rectangular. The overall UI is very practical and so, but when you want to work with more complex shapes overlapping it gets very limitated.
I've looked around with no success, so may be someone here as a clue for me.
How would you integrate something from this kind of page (interactive map of australia) and make the map and an Edge environment work together.
Here i'm thinking :
- Edge buttons that would highlight some parts of the map (or reveal some divs from the original html)
- RaphaelJS code at building of the map that would interact with edge symbols.
So far, my knowledge of code/js/css seems too limited to get things done as i wish, any ideas/insight welcome.

Answer 1

Hi Franck!
You are right. The default implementation uses the SVG as a background image applied to a div container. That's the reason why you loose all the interactivity within the SVG itself. I love Raphael, but I think it would be an overhead for your map example.
Here is a light weight solution with (jQuery SVG) that works like a charme with non-rectangle click areas.
Assuming you have a rectangle placed on the stage (named "playground") you can load the SVG into that container within the "compositionReady" handler of your composition like this:
yepnope({
     load: "libs/jquery.svg.package-1.4.5/jquery.svg.min.js",
     complete: function() {
          // Load Handler for SVG Graphics
          function onSvgLoad(svg, error) {
            $('path#Cyan').click( function(){
                 alert('hello Cyan');
                 // Your code here
          // Select Edge Animate Element for SVG display
          var playground = sym.$("playground");
          // Load SVG Graphics
          playground.svg({});
          var svg = playground.svg('get');
          svg.load('images/pie.svg', {
               addTo: false,
               changeSize: false,
               onLoad: onSvgLoad
I put together a small demo project with an example svg and all dependencies:
http://public.simonwidjaja.com/temp/AnSVG.zip
Hope that helps!
Cheers,
Simon