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

发生的事情是未检测到鼠标事件，因为填充为“无”，只需添加：

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

然后就可以了。

Answer 2

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

Answer 3

fill: none; pointer-event: all;应该适用于大多数现代浏览器，但IE9和IE10不支持pointer-events。此外，您还可以设置pointer-events: fill，此fill值为SVG only，这意味着fill或visibility的值不会影响指针事件处理。< / p>

如果不支持fill: transparent，则IE9和IE10的解决方法是将CSS设置为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 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(); 
});

如何将鼠标悬停在SVG rect上？

5 个答案: