web-dev-qa-db-fra.com

Comment survoler un rectangle SVG?

Dans ce morceau de SVG (essayé dans FF 8, Safari 5.1.2, Chrome 16, tout sur Mac), lors du déplacement de la souris sur la barre, aucun des navigateurs ne détecte correctement chaque souris -over/out événement, parfois ça marche parfois ça ne marche pas. Mais c'est cohérent dans tous les navigateurs donc c'est probablement quelque chose à propos du code SVG. L'utilisation de onmouseover et onmouseout donne le même résultat - doesn ' t fonctionne correctement.

Quelle serait la bonne façon de l'implémenter en survol pour les 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>
csssvghover
27
milan

Ce qui se passe, c'est que les événements de la souris ne sont pas détectés car le remplissage est "aucun", ajoutez simplement:

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

Ensuite, cela fonctionne très bien.

54
Erik Dahlström

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

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

$("#rect").mouseenter(function() {
  $(this).css("fill", "teal")
}).mouseout(function(){
  $(this).css("fill","transparent")
})
#rect {
  fill: transparent;
  stroke: blue;
  stroke-width: 1px
}
<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>
5
fengshuo
.bar:hover { 
    fill: red !important;
}
4
user669677

Essayez de lui donner un remplissage non transparent.

Également <style> doit sortir du <svg>.

1
Supr