Hit testing jquery svg

by nilloc

HTML

<script src="https://raw.github.com/kbwood/svg/master/jquery.svg.js?somevar=somevalue&amp;dummy=.js"></script>
<h2> Hit testing jquery svg. </h2>
<p>Library found <span><a href="http://keith-wood.name/svg.html">here </a></span></p>
<a id ="reset" href="#"> Reset </a>

<div  id="canvas">

</div>

CSS

#canvas {
    position: relative;
    height: 400px;
    width: 400px;
}

JavaScript

function drawInitial(svg) {
    var path = svg.createPath();
    
        
    ///Paths 

    svg.rect(0, 0, 1000, 1000, 0, 0, {fill: 'white'});
    svg.path(path.move(50, 50).line(50, 150).close(), 
    {fill: 'none', stroke: 'red', strokeWidth: 5});
    path = svg.createPath();
    svg.path(path.move(100, 50).line(100, 150).close(),  
    {fill: 'none', stroke: 'red', strokeWidth: 4});
    path = svg.createPath();
    svg.path(path.move(150, 50).line(150, 150).close(),  
    {fill: 'none', stroke: 'red', strokeWidth: 3});
    path = svg.createPath();
    svg.path(path.move(200, 50).line(200, 150).close(),  
    {fill: 'none', stroke: 'red', strokeWidth: 2});
    path = svg.createPath();
    svg.path(path.move(250, 50).line(250, 150).close(),  
    {fill: 'none', stroke: 'red', strokeWidth: 1});
    path = svg.createPath();
    svg._svg.addEventListener('mousemove', svgMouseOver, false);
    window._svg = svg;
}
function svgMouseOver (event) {
    console.log(event)
    window._svg.circle(event.layerX, event.layerY, 1)
}    
$('#canvas').svg({
    onLoad: drawInitial
});


$('path').on('mouseover', function(e) {
       $(e.target).attr('stroke', 'black');        
});


$('#reset').click(function(e) {
    $('path').attr('stroke', 'red');
});