Scalable Vector Graphics - HTML5 with Visual Studio 2012 - page 215

path
{
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}

2. Then add the code shown in listing 9-5 to the script element.

Listing 9-5. Adding function to support animation
// Setup some global variables
var timer;
var stateCode;
var stateName;
var animate;
var angle;

function selectState(e) {
var event=e || window.event;

// Get the state code and state name
stateCode=event.target.getAttributeNS(null, "id");
stateName=event.target.getAttributeNS(null, "class");

// Get the selected path element and then make a copy of it
var path=document.getElementById(stateCode);
animate=path.cloneNode(false);

// Set some display properties and add the copy to the document
animate.setAttributeNS(null, "fill-opacity", "1.0");
animate.setAttributeNS(null, "stroke-width", "3");
document.getElementById("map").appendChild(animate);

angle=0;

// Setup a timer to run every 10 msec
timer=setInterval(function () { animateState(); }, 10);
}

function animateState() {
angle+= 1;

// If we've rotated 360 degress, stop the timer, destroy the copy
// of the element, and show an alert
if (angle>360) {
clearInterval(timer);
animate.setAttributeNS(null, "visibility", "hidden");
var old=document.getElementById("map").removeChild(animate);

alert(stateCode +" - "+ stateName);