Как навести курсор на SVG rect?

В этом фрагменте SVG (в FF 8, Safari 5.1.2, Chrome 16, все на Mac), при перемещении мыши над панелью, ни один из браузеров не обнаруживает каждое событие на мыши-переключение/выключение, иногда оно работает иногда это не так. Но он согласован во всех браузерах, поэтому он, вероятно, что-то касается SVG-кода. Использование onmouseover и onmouseout дает тот же результат - не работает должным образом.

Каков был бы правильный способ реализации при наведении на 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>

Ответы

Ответ 1

Что происходит, так это то, что события мыши не обнаружены, потому что заполнение является "none", просто добавьте:

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

Тогда все работает отлично.

Ответ 2

fill: none; pointer-event: all; должен работать в большинстве современных браузеров, но IE9 и IE10 не поддерживают pointer-events. Кроме того, вы также можете установить pointer-events: fill. Это значение fill только для SVG, то есть значение fill или visibility не влияет на обработку событий указателя.

Обходной путь для IE9 и IE10 - установить CSS на fill: transparent, если pointer-events не поддерживается (вы можете использовать Modernizr для обнаружения функций браузера).

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

Ответ 3

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

Ответ 4

Попробуйте дать ему непрозрачную заливку.

~~Кроме того, <style> должен выйти за пределы <svg>.~~

Ответ 5

Попробуйте сделать это через jQuery:

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

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

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

Или, альтернативно:

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

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

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