Snap.svg in Edge Animate

Question

Hi, everyone,
I'm trying to use Snap.svg.js in my EA composition to animate some svg elements. Does anyone know if this is possible? That is I want, to access an svg graphic created in Ai to animate it, but EA wraps it in a div and I need to be able to get inside of this div to access the graphic to use
Snap("svgGraphic")
Then change some of the attributes.

Answer 1

I recommend Edge Commons (Edge Commons - Extension Library for Edge Animate and Edge Reflow | EdgeDocks.com) for this, it makes the whole thing really simple! There's a description of how to use it on the website but to give you a rough idea of whats required:
Add onmouseover/onmouseout events to each State in your svg using the SVG Interactivity palette in Illustrator, e.g. onmouseover=notify(this, "over"); onmouseout=notify(this,"out");
Import the svg into Edge Animate then use the following code to pick up the notify() value and run your mouseover and mouseout functions:
EC.SVG.accessSVG(sym.$("map")).done(
  function(svgDocument){
svgDocument.addEventListener("over", function(event) {
sym.setVariable("overPart", event.target);
var stateOver = sym.getVariable("overPart");
stateOver.style.opacity=0.2;
svgDocument.addEventListener("out", function(event) {
sym.setVariable("outPart", event.target);
var stateOut = sym.getVariable("outPart");
stateOut.style.opacity=1.0;
You can also select svg elements by ID from within your Edge composition, e.g. $("#florida", svgDocument).css({'opacity':'0.2'});