2 Replies Latest reply on Jan 27, 2015 9:45 AM by Phildsb

    Need help with SVG in Edge Animate!!!

    Charles Joyner Level 1

      Hello,

       

      I am trying to place a .svg file in Edge Animate.  I have it built outside of Edge Animate and am wondering if I can build the same functionality using this program.

       

      Basically, it is a map of the US and I would like to have each state glow* when it is hovered.  In the .svg file, the <path> tag allows me to create coordinates which build the states within the map.  These do not rely on block elements such as <div>.  I suspect that Edge Animate will import the entire .svg as a single image within a block.  Alternatively, I could break up the .svg file of the map and create an .svg file for each state, but I think that Edge Animate will turn the .svg files of each state into block elements and cause them to overlay when they are put together. 

       

      My question is:  Could I put the .svg map linked below into Edge Animate without having to worry about blocks overlaying each other and preventing a layer from being clickable?  Please let me know if I need to specify anything.  Any help you can provide is appreciated.  Thank you!!!

       

      http://sample.charlesjoyner.com/20150121-usa-map.svg

       

       

       

      * I actually decrease the opacity of each state to create the glow effect

        • 1. Re: Need help with SVG in Edge Animate!!!
          resdesign Adobe Community Professional & MVP

          Have you tried edgeCommons for SVG. I have used it for a number of maps with various actions.

          Let me know if you need an example.

          Here is a sample of how I used EC. This is not a map but the principle applies.

          1 person found this helpful
          • 2. Re: Need help with SVG in Edge Animate!!!
            Phildsb Level 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'});