SVG & Smart Maps

by Keith Bugg





Listing One

<?xml version="1.0" standalone="yes"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 

  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="800" height="600" viewBox="0 0 800 600"

     xmlns="http://www.w3.org/2000/svg">

     <desc>Simple animation</desc>

    <defs>

       <rect id="car" x="0" y="0" width="10" height="5" 

         style="stroke:black;fill:black;"/>

    </defs>



<path id="i40" d="M 0,300 h800 "

style="fill:black; stroke:red; stroke-width:3;fill:none" />



<image x="400" y="275" width="23" height="21" xlink:href="i40.gif"/>

<use xlink:href="#car">

<animateMotion begin="0s" dur="4s" repeatCount="indefinite">

<mpath xlink:href="#i40"/>

</animateMotion>

</use>

</svg>





Listing Two 

function OnObjectClick(evt)

{

    var target = evt.target;    // evt.target is obj. clicked

    var objId=target.getAttribute("id");// id of object 

    // now have object-change its properties, etc   

}       



















1



