css - img - show svg on hover

¿Cómo pasar el mouse sobre un SVG rect?

Question

En esta pieza de SVG (probada en FF 8, Safari 5.1.2, Chrome 16, todo en Mac), al mover el mouse sobre la barra, ninguno de los navegadores detecta correctamente cada evento en el mouse sobre / salir, a veces funciona a veces no. Pero es coherente en todos los navegadores, por lo que probablemente sea algo relacionado con el código SVG. El uso de onmouseover y onmouseout da el mismo resultado: no funciona correctamente.

¿Cuál sería la forma correcta de implementar en vuelo estacionario para ángulos rect SVG?

<?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>

Answer 1

Intenta darle un relleno no transparente.

Además, el <style> necesita salir del <svg> .

Answer 2

Intente hacerlo a través 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");  
});

O alternativamente :

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

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

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

Answer 3

Lo que sucede es que los eventos del mouse no se detectan porque el relleno es ''ninguno'', solo agrega:

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

Entonces funciona bien.

Answer 4

fill: none; pointer-event: all; debería funcionar en la mayoría de los navegadores modernos, pero IE9 e IE10 no admiten pointer-events . Además, también puede establecer pointer-events: fill , este valor de fill es solo SVG , lo que significa que el valor de fill o visibility no afecta el procesamiento de eventos de puntero.

Una solución temporal para IE9 e IE10 es configurar CSS para que se fill: transparent si pointer-events no son compatibles (puede usar Modernizr para detectar características del navegador).

$("#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>

Answer 5

.bar:hover { 
    fill: red !important;
}