28-03-2015, 10:42 AM
Pour le rectangle SVG, c'est fill:transparent mais tu vas couper tous les évènements des éléments en dessous de ce rectangle (pas de mouse hover sur les autres éléments du SVG donc).
Après, je dirai que ton soucis se situe ailleurs: ceci
Marche très bien chez moi (FF à jour)... Si la souris quitte le cadre du SVG, mouseleave se déclenche,; tant que la souris reste dans le SVG (qu'elle soit sur le cercle ou non), rien ne se passe...
Après, je dirai que ton soucis se situe ailleurs: ceci
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>SVG events</title>
<style>
.results {
display: block;
}
svg {
width: 160px;
border: 1px solid black;
}
</style>
<script src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<svg id="map" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="60" fill="red"/>
<circle cx="50" cy="50" r="30" fill="green"/>
</svg>
<ul class="results">
<li>Ready</li>
</ul>
<script>
$(document).ready(function () {
$('.results').append($('<li/>').text('Start...'));
$('#map').on('mouseleave', function() {
$('.results').append($('<li/>').text('Leaving...'));
});
$('#map').on('mouseenter', function() {
$('.results').append($('<li/>').text('Entering...'));
});
});
</script>
</body>
</html>
Marche très bien chez moi (FF à jour)... Si la souris quitte le cadre du SVG, mouseleave se déclenche,; tant que la souris reste dans le SVG (qu'elle soit sur le cercle ou non), rien ne se passe...