Как навести курсор на SVG-прямоугольник?

Question

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

Каким будет правильный способ применения при наведении на углы SVG rect?

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

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

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

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

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

Answer 3

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

Answer 4

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

---

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

Answer 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(); 
});