Draw Vector Walkpath - SVG | HTML5

This example shows the capability and a good example of SVG animation.

HTML

<script src="https://cdn.rawgit.com/camoconnell/lazy-line-painter/master/jquery.lazylinepainter-1.5.1.min.js"></script>
<h1><a href="http://www.attuts.com">View Full Tutorial</a> </h1>
<svg version="1.1" id="Layer_1" xmlns:amcharts="http://amcharts.com/ammap"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px"
	 viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<symbol  id="Capitol" viewBox="-5.78 -5.781 11.559 11.563">
	<g>
		<path fill="#DA2128" d="M5.779-0.002c0-3.191-2.588-5.779-5.779-5.779s-5.78,2.588-5.78,5.779c0,3.193,2.588,5.781,5.78,5.781
			S5.779,3.191,5.779-0.002z"/>
		<g>
			<g>
				<polygon fill="#FFFFFF" points="3.434,-4.676 0.008,-2.244 -3.382,-4.744 -2.321,-0.718 -5.554,1.718 -1.525,1.863 -0.08,5.781 
					1.436,1.896 5.476,1.83 2.299,-0.663 				"/>
			</g>
		</g>
	</g>
</symbol>
<symbol  id="School" viewBox="-3.836 -6.788 7.672 13.576">
	<g>
		<polygon fill="#DA2128" points="3.571,-6.788 -3.836,-6.788 -3.836,0.62 3.571,0.62 		"/>
		<polygon fill="#DA2128" points="-1.639,2.702 1.131,2.702 1.131,0.604 -1.639,0.604 		"/>
		<polygon fill="#DA2128" points="-0.482,6.788 -0.027,6.739 3.836,6.005 -0.051,4.882 -0.051,1.138 -0.482,1.138 		"/>
	</g>
</symbol>
<defs>
	
	
		<amcharts:ammap  bottomLatitude="-33.743888" rightLongitude="-34.789914" topLatitude="5.275696" leftLongitude="-74.008595" projection="mercator">
		</amcharts:ammap>
</defs>
<g>
	<path id="BR-AC" fill="#CCCCCC" stroke="#FFFFFF" stroke-width="0.5"...

CSS

path:hover{
    fill:red;
}
svg{
    width:500px;
    
}

JavaScript

var previousWalkPath = null;
var pathObj = {
    "shape3walkpath": {
        "strokepath": [
            {
                "path": "M325.39,153.886c0,0-139.89-79.156-227.89,10.729",
                "duration": 1000
            }
        ],
        "dimensions": {
            "width": 612,
            "height": 792
        }
    },
    "shape1walkpath": {
        "strokepath": [
            {
                "path": "M341.133,156.85c0,0,164.967,29.16,144.167,208.405",
                "duration": 800
            }
        ],
        "dimensions": {
            "width": 612,
            "height": 792
        }
    },
    "shape2walkpath": {
        "strokepath": [
            {
                "path": "M332.052,159.443 275.21,272.5 342.32,331.17 371.03,366.27 381.37,403.5 387.592,411.38",
                "duration": 2000
            }
        ],
        "dimensions": {
            "width": 612,
            "height": 792
        }
    }
}; 

$(".hit").click(function(e){

   var mid = $(this).attr('id');
    if(previousWalkPath != null){
        $(previousWalkPath).lazylinepainter('erase');
//        $(previousWalkPath).empty();
    }
    previousWalkPath = '#'+mid+'walkpath';
    
$(previousWalkPath).lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
})