This Is My Second Test of SnapSvg In Edge Animate

Below is the map of Mexico which I downloaded from VECTEEZY . The map is a vector image by "chuche001".Vecteezy and FreePik are two of the many sites with large libraries of images where users are allowed to use vector images free on attribution. These images come in various formats including AI, EPS, and SVG. If you have Illustrator you can open the AI file and edit it. Then save it as an svg.

This is an interactive map that responds to the hover and click events by changing color. Using svg images in Edge Animate allows you to animate the whole image in the timeline which is fine if that’s all you want to do, but if you want to animate a portion of the image like the hat on a character you need to import the hat as a separate file. You will also not be able to animate the color as you can with native shapes. So I imported a javaScript library that handles Svg images. I found SnapSVG.js, a library created by Dimitry Baranovskiy. Snap.svg.js. is open source which means you can download it free to your computer and import it to your Edge Animate project from http://snapsvg.io

Viewing the SVG structure of the file

After downloading the AI image from Vecteezy, I saved it as an svg and opened it in Brackets, an open source code editor that you can download for free. You can also open the svg file in Dreamweaver or any other code editor. Although it may not be absolutely necessary I would advice people to be familiar with the basic structure of the SVG DOM. The SVG DOM is very similar to the HTML DOM; it is composed of elements represented by tags like <path></path>, <circle></circle>, etc. SVG and HTML with CSS are both XML languages which describe for the browser the contents of a page. Like HTML, SVG elements have attributes that can be changed or added to them via javaScript during runtime( by runtime I mean at the time the user is viewing the page or at the time of an event).

Here's a captured image of the svg file opened in Dreamweaver. The structure shows the main svg element <svg id="mexicoMap"....></svg> containing three group elements

Inside each group are various other groups or elements following the group structure that was used in Illustrator to create the vactor image. For example the ''Bg" group contains two gradients and a rectangle that uses the gradient fills

 

 

Here's the same file opened in DW in expanded form:

If you're familiar with jQuery then SnapSVG would not be that foreign to you; like jQuery, it provides a shortcut to the regular javaScript code giving you access to most of the functions, methods and objects needed to manipulate the SVG DOM.

Loading the Existing SVG into the Stage

Now in EA, (Edge Animate) I opened a new composition with a rectangle I named "mapHolder" for my map. I wrote all my code in the creationComplete event handler. Here's where I loaded my map. I did not place the MexicoMap.svg in the Edge image library, instead I left it out 'naked' inside the root folder where the Edge working file is. I needed to load the file using its URL(path to image). Actually this won't matter you simply use the "images/imagename.svg" for the URL.

Snap has a method or function for loading external svg files, Snap.load(), which you can find in the Docs page of the Snap Site. I think this function requires that you have a drawing area already for Sanp, but since I wanted to define the drawing area inside of the map image, I would need to use a different function. I used the jQuery.get() function, which is one of many Ajax functions from jQuery. Don't forget to include jQuery.js and SnapSvg.js in the script library of Edge Animate like I did (I spent 3 days trying to figure out why nothing was showing up in the preview).

Below is the first 5 lines of code I used:

jQuery.get('MexicoMap.svg', callbackforGet); --- get() requires at least one parameter(a bit of information the function needs ), the URL and name of the file it needs to locate you can also include a function I named "callbackforGet" which is run when get() succeeds in obtaining the file and returns it. The file is then passed to the callbackForGet() function in the variable "data" as a parameter

function callbackforGet(data){ ---In this line of code I declare the function callbackforGet() and define the first four commands

var svgNode = $("svg#mexicoMap", data); -- This line and the next 2 lines inserts the main svg element, <svg id="mexicoMap">...</svg>, with all her children into the div I named "mapHolder" which I had already placed on the stage of EA.

var docNode = document.adoptNode(svgNode[0]);

sym.$("mapHolder").html(docNode);

var sCanvas = Snap("svg#mexicoMap");--Now we're ready to start using Snap. Snap needs to define a drawing area so I passed the whole main svg element to be the drawing area and saved it in a variable 'sCanvas'

......

}

In the next 2 images is the complete code from EA


Writing the Code Using SnapSVG.js

First I created three svg text elements in sCanvas (see lines 14, 19, and 26) using the text() function. It needs two coordinates, x and y, for the text position. The next parameter is the text string. Next I applied the attr() function to change the default attributes of the text. The attr() function requires an object composed of property-value pairs separated by a comma enclosed in braces, {}, just like the css() function of jQuery

Line 32 - Next I wanted to register all the state polygons for the hover and click events so I selected all the state polygons using the selectAll() function and store them in an array, 'states'. There are 27 states so I didn't want to work with each one individually. I ran a loop through the array using the forEach() function which requires the element (el) and the index i.

Note that the hover() function can take two handlers. This handlers are the functions that run when the event occurs. I gave them these silly names "doSomethingIn" and "doSomethingOut" In the click event I wanted the state to change color, so I called its handler "changeColor". One reason why I liked this map is because the creator had already assigned an id to each of the states with its name. So I could use the id to retrieve the name of each state on the click event using the id attribute. If you wanted to display other kinds of information you might have to create a text element that you could store in the <defs></defs> element. See the function element.toDefs() in the docs.

In the changeColor() function on line 67 I used a random function, getRandomNum(a, b) that I use frequently. Here's where you can write functions that you might need in other parts of your program.

Thank you for hanging in there. I'm hoping that this little write up encourages you to explore SnapSVG in Edge Animate. I apologize for all the misspellings and grammatical errors.