jQuery SVG - élément hover

Et au début, je stucked. J'ai créé un simple svg.circle et svg.text sur ce cercle. Je veux donner un peu d'animation pendant que la souris survole le cercle. Cela fonctionne, mais quand je déplace le pointeur de la souris sur l'état de vol stationnaire de texte est éteint. C'est le bon comportement, mais comment forcer cet état hover pendant que la souris reçoit du texte?

Voici le 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>

Ceci est le résultat du code: http://goo.gl/RwRw0

Source

2012-10-12 David

Définissez la propriété pointer-events sans pareil sur le texte si vous ne voulez pas répondre à souris par dessus

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

devient

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

Source

2012-10-12 12:28:47

merci Robert, cela fonctionne comme un charme :) – David

BTW, c'est une propriété css, il est donc câblé que je ne l'ai jamais entendu parler, de toute façon encore une fois merci – David

jQuery SVG - élément hover

Répondre

Questions connexes