a sample SVG object ... <svg id="abcdef" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(0,0)"> <text id="horizontalText" x="100" y="100" fill="red" stroke="blue" stroke-width="4" font-size="96"> janaganamana </text> <path d="M150,150 a100,100 0 0,0 100,100 z" fill="red" stroke="black" stroke-width="4"/> <path d="M150,150 a100,100 0 0,0 -100,100 z" fill="green" stroke="black" stroke-width="4"/> <path d="M150,150 a100,100 0 0,0 -100,-100 z" fill="blue" stroke="black" stroke-width="4"/> <path d="M150,150 a100,100 0 0,0 100,-100 z" fill="yellow" stroke="black" stroke-width="4"/> </g> </svg>

Add handling for svg elements as below ... <script type="text/javascript" > $(document).ready(function () { var a = document.getElementById("abcdef"); $('svg path').bind("mousedown", handleMouseEnter1) .bind("mouseup", handleMouseEnter2) .bind("mouseover", handleMouseEnter3) .bind("mousemove", handleMouseEnter4) .bind("mouseout", handleMouseEnter5); }); function handleMouseEnter1(e) { alert(1); }; function handleMouseEnter2(e) { alert(2); }; function handleMouseEnter3(e) { //alert(3); }; function handleMouseEnter4(e) { //alert(4); }; function handleMouseEnter5(e) { //alert(5); $('svg text').remove(); }; </script>

In the above var a = document.getElementById("abcdef"); is not required in this context. But imagine if you have reference to somefile.svg file reference insterad of actual svg .... Then the file is loaded asynchronously or so.( like any IMG element. So instead of $(document).ready(function () , you may want to handle load function of the svg file load event... So ... $(document).ready(function () { var a = document.getElementById("abcdef"); a.addEventListener("load",function(){ var svgDoc = a.contentDocument; var svgRoot = svgDoc.documentElement; $('svg path').bind("mousedown", handleMouseEnter1) .bind("mouseup", handleMouseEnter2) .bind("mouseover", handleMouseEnter3) .bind("mousemove", handleMouseEnter4) .bind("mouseout", handleMouseEnter5); },false);

wow,.. thanks a lot .