Comment passez la souris sur une SVG rect?

Dans ce morceau de SVG (essayé dans FF 8, Safari 5.1.2, Chrome 16, le tout sur un Mac), lors du déplacement de la souris sur la barre, aucun des navigateurs détecter correctement chaque passage de la souris/événement, parfois cela fonctionne, parfois cela ne marche pas. Mais elle est compatible sur tous les navigateurs, donc c'est probablement quelque chose sur le code SVG. À l'aide de onmouseover et onmouseout donne le même résultat - ne fonctionne pas correctement.

Quelle serait la bonne façon de mettre en œuvre sur le vol stationnaire pour le SVG rectangles? 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600" version="1.1" style="display:inline">

<style type="text/css">
.bar {
    fill: none;
}
.bar:hover { 
    fill: red;
}
</style>
  <g>
   <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" />
  </g>
</svg>
InformationsquelleAutor milan | 2012-02-09
  1. 54

    Ce qui se passe est que les événements de la souris ne sont pas détectés parce que le fond est "aucun", il suffit d'ajouter:

    .bar {
    fill: none;
    pointer-events: all;
}

    Alors qu'il fonctionne parfaitement.

    InformationsquelleAutor Erik Dahlström
  2. 6

    fill: none; pointer-event: all; devrait fonctionner dans la plupart des navigateurs modernes, mais IE9 et IE10 ne prend pas en charge pointer-events. En outre, vous pouvez également définir pointer-events: fill, Ce fill valeur est SVG n', sens de la valeur de fill ou visibility n'affecte pas les événements de pointeur de traitement.

    Une solution de contournement pour IE9 et IE10 est de mettre en CSS pour fill: transparent si pointer-events n'est pas pris en charge (vous pouvez utiliser Modernizr pour détecter les fonctionnalités du navigateur).

    JS:

    $("#rect").mouseenter(function() {
  $(this).css("fill", "teal")
}).mouseout(function(){
  $(this).css("fill","transparent")
})

    CSS:

    #rect {
  fill: transparent;
  stroke: blue;
  stroke-width: 1px
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<svg width=300 height=300>
  <rect id="rect" x=0 y=0 width=100 height=100></rect>
</svg>

    InformationsquelleAutor fengshuo
  3. 4
    .bar:hover { 
    fill: red !important;
}
    • Honnêtement, je ne pense pas que cela change quoi que ce soit. .bar:hover est plus spécifique que .bar – les styles de prendre plus de toute façon.
    InformationsquelleAutor
  4. 1

    Essayer de donner à un non-remplissage transparent.

    en outre, la <style> doit aller à l'extérieur de la <svg>.

    InformationsquelleAutor Supr
  5. -3

    Essayer de le faire par le biais de jQuery :

    $(".bar").attr("disable","True");
$(".bar").css("background-color","Red");

$(".bar").mouseenter(function() {   
    $(this).attr("disable","False");  
}); 

$(".bar").mouseleave(function() {   
    $(this).attr("disable","True");  
});

    Ou alternativement :

    $(".bar").hide();
$(".bar").css("background-color","Red");

$(".bar").mouseenter(function() {   
    $(this).show();  
}); 

$(".bar").mouseleave(function() {   
    $(this).hide(); 
});
    InformationsquelleAutor ParPar