CODEWITHSUNDEEP
jquerysvghover
David
David

Reputation: 1963

jQuery SVG - hover element

I'm trying to use jQuery SVG plugin http://keith-wood.name/svg.html

And in the very beginning I stucked. I've created a simple svg.circle and svg.text upon that circle. I want to give a little animation while mouse hovers the circle. It works, but then when I move mouse pointer on text hover state is off. It's right behavior, but how to force this hover state while mouse gets text?

This is the code: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
#svgbasics { width: 400px; height: 300px; border: 1px solid #484; font-family: Tahoma; font-size: 50px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svganim.min.js"></script>
<script type="text/javascript" src="jquery.svgfilter.js"></script>
<script type="text/javascript">

$(function() {
    $('#svgbasics').svg({onLoad: drawInitial});
});

function drawInitial(svg) {

    var mycircle = svg.circle(75, 75, 50, {fill: '#f2477b', stroke: 'none', 'stroke-width': 0});
    var mytext = svg.text(52, 76, 'SVG', {'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer'});

    $(mycircle).hover(function() {
        $(this).css("cursor", "pointer");
        $(mycircle).animate({svgR: 45, svgStrokeWidth: 4, svgStroke: '#f882a6'}, 100);  
    }, function() { 
        $(mycircle).animate({svgR: 50, svgStrokeWidth: 0, svgStroke: 'none'}, 100); 
    });
}
</script>
</head>
<body>
<div id="svgbasics"></div>
</body>
</html>

This is the result of the code: http://goo.gl/RwRw0

Upvotes: 1

Views: 4879

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

Set the pointer-events property to none on the text if you don't want it to respond to mouse over e.g.

var mytext = svg.text(52, 76, 'SVG', {'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer'});

becomes

var mytext = svg.text(52, 76, 'SVG', {'font-family':"Verdana", 'font-size':20, 'text-anchor':'middle', 'fill':'#fff', 'cursor': 'pointer', 'pointer-events', 'none'});

Upvotes: 5

Related Questions