Edge Commons SVG - How do I reference an SVG element directly without a click or mouse over event?

I went through this tutorial about interacting with SVG files...

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

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

However, the example requires there to be a "select" event in the SVG file, and an event listener in the Edge Animate file. I am dealing with a somewhat different scenario, and I would love your help to figure it out.

I have an SVG map of the USA, and when the map loads, I would like each of the states (separate elements in the SVG) to be colored differently based on data in the Edge Animate file. This code from the tutorial references an element when it is being passed in by the select event...

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

                    function(svgDocument){

                    //Add 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 reference an SVG element directly on load without an event trigger?

I thought about using something like:

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

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

But that does not seem to be working.

Your help is greatly appreciated!!!