Commons of edge SVG - how to reference an SVG element directly without a click or mouse over the event?

I went through this tutorial to interact with the SVG files...

http://www.YouTube.com/watch?v=4UEB6gaLKuw

.. .and it was great. The example worked perfectly, and I was able to replicate the functionality in my own project.

However, the example requires that there is a "select" event in the SVG file and an event listener in the Edge file animate. I'm dealing with a slightly different scenario, and I would like your help to understand.

I have a card SVG of the USA, and when loading the map, I would like each State (separated in the SVG elements) color differently based on the data in the file Edge animate. Copy the following code in the tutorial refers to an element when it is passed in the select event...

EC. . Done () SVG.accessSVG (sym.$("USA_Map_blue2"))

{function (svgDocument)}

Add the event listener

svgDocument.addEventListener ("select", {function (event)}

Remember selected state

sym.setVariable ("selectedState", event.target);

Show selected state

SYM.$("selectedStateTxt").html (Event.Target.ID);

});

}

);

.. But how can I make reference to an SVG element directly on load without an event trigger?

I thought about using something like:

Penn var = svgDocument.getElementByID ("pennsylvania");

$(penn) .css ("fill",("#00ff00"));

But this doesn't seem to work.

Your help is greatly appreciated!

Hi Fred,.

Thanks for the comments. You can use jQuery to put the hand in of the SVG DOM as well. Here's an example of my next side project animate Cookbook (will be published shortly on EdgeDocks.com). It shows an interactive map of the United States.

The source code looks like this:

It's basically simple jQuery with a context (the context of the SVG document).

You can use something like this to access nodes (for example the path) in your animated model:

$("path",_svgDocument).css ("fill", "#770000");    changes the color of all THE nodes in the path

$("#some_id",_svgDocument).css ("fill", "#770000");    changes the color of a specific id

I hope this helps. If you like my work as open source, please spread the word

Simon Widjaja

Adobe Certified Expert (ACE)

Adobe certified instructor (ACI)

++++

EdgeDocks.com - all Edge: tutorials, components, Extensions

++++

Tags: Edge Animate

Similar Questions

Maybe you are looking for

  • When I click on a window it does not come to the front

    If I have 3 windows open, they overlap, if I click the back one, remains in the back, I want to show him to the front, so I can read.It remains in the front and slide the others behind it.

  • How can I restore Firefox 6 after updating to Firefox 7? Extension of the key does not work.

    I use Roboform constantly. I understand that my (7.x.x) version is not yet supported in Firefox 7, but somehow the update of Firefox was triggered in a moment of unconsciousness. Could not find a way to restore Firefox 6 until compatibility issues ar

  • Message for Android

    My friend has an iPhone, but switched to an android. Now, every time that I send him a message it sends as an IMessage, I know that I can hold and press 'Send as Message text', but I don't want to do this every time I text him. How I put it so it sen

  • Write to the file in spreadsheet that VI is not add

    See attached vi. I logged a bunch of data into excellent .xls file, and then restart the vi and sign again in the same xls file, but I noticed the new data do not add to the file existing, but replace all the old data In my writing file vi spreadshee

  • Internet explore 8

    I have Windows XP on my desktop.  Recently, I downloaded and installed Internet Explorer 8.  Since then I couldn't send or receive e-mail.  I checked with Verizon and after much research, they said it's a problem with Internet Explorer.  What should