Firefox 3.6 test de hit chevauchant des formes SVG

Je dessine 2 chemins SVG comme le fait Google Maps avec les directions. Le problème que j'ai est que la section du premier chemin qui est chevauchée par le cadre de délimitation du deuxième chemin ne lancera pas les événements mouseover, mouseout ou click. Même si les gestionnaires d'événements sont sur l'élément chemin d'accès, les événements semblent se déclencher lorsque la souris se trouve n'importe où dans la zone de délimitation du chemin.Firefox 3.6 test de hit chevauchant des formes SVG

Est-il possible d'éviter cela? Sur Chrome, Safari et Opera, je n'ai pas ce problème. C'est seulement SVG dans Firefox.

J'ai créé un exemple de test. Chaque fois que vous déplacez la souris sur un cercle, il est censé vous alerter de sa couleur. Vous verrez que si vous approchez le cercle vert du côté droit, cela fonctionne parce qu'il tombe en dehors de la largeur 300px du conteneur du cercle rouge. Cependant, si vous vous approchez du haut ou du bas du cercle vert, vous n'obtiendrez rien. Maintenant, essayez la même chose dans Chrome/Safari/Opera et vous verrez que cela fonctionne comme prévu.

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
<head> 
<title>SVG embedded inline in XHTML</title> 

<script type="text/javascript"> 
    window.onload = function() { 
    var red = document.getElementById('red-circle'); 
    var green = document.getElementById('green-circle'); 


    red.onmouseover = function (e) { 
    alert('red mouse over'); 
    }; 
    green.onmouseover = function (e) { 
    alert('green mouse over'); 
    }; 
    }; 
</script> 
</head> 
<body> 

<svg:svg style="position: absolute; top: 0px; left: 110px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px"> 
    <svg:circle id="green-circle" cx="150px" cy="100px" r="50px" fill="green" /> 
</svg:svg> 

<svg:svg style="position: absolute; top: 0px; left: 0px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px"> 
    <svg:circle id="red-circle" cx="150px" cy="100px" r="50px" fill="#ff0000" /> 
</svg:svg> 
</body> 
</html>

Source

2010-06-21 Alex

Je reproduis ce avec Firefox 4. Qu'est-ce que vous pouvez faire est d'installer le gestionnaire d'événements à un niveau supérieur dans la hiérarchie des DOM et utiliser le champ target de l'événement pour discerner entre les éléments graphiques.

Source

2010-12-30 09:44:23 Ringding

Cela ne fonctionne toujours pas car Firefox utilise une zone de délimitation autour de la forme. Pas les formes exacte du périmètre. Ce que je devais finir par faire est de faire manuellement un test de hit sur l'élément parent. C'est-à-dire, trace les valeurs x et y du curseur de la souris et vérifie s'il coupe le polygone. – Alex

Vous devez faire quelque chose de mal, car cela fonctionne vraiment de cette façon. Cela fonctionne pour http://code.google.com/p/svg-edit/, et j'ai commencé un projet similaire (en fait, une entreprise) qui le fait aussi. – Ringding

Firefox 3.6 test de hit chevauchant des formes SVG

Répondre

Questions connexes