1
Internet Explorer中的鼠标悬停行为似乎取决于我为transform属性给出的值以及d属性中的点的大小。IE中的SVG路径鼠标悬停行为不正确
在所提供的示例中，在Internet Explorer中，只有当指针位于路径元素的着色区域内时，红色三角形才会显示鼠标悬停行为。当鼠标移动到三角形路径的边界框内时，蓝色三角形的鼠标悬停行为会触发。
此问题在Chrome和Firefox中无法重现。
http://jsfiddle.net/3591mj2o/7/
<html>
<head>
<script src="d3.min.js" type="text/javascript"></script>
<style type="text/css">
#path1 {
fill: rgb(255, 0, 0);
}
#path2 {
fill: rgb(0, 0, 255);
}
svg {
border-style: dotted;
border-width: 2px;
}
</style>
</head>
<body>
<svg height="200" width="150">
<path id="path1" transform="translate(0,0)scale(1)" d="M75 0 L0 200 L150 200 Z" />
</svg>
<svg height="200" width="150">
<path id="path2" transform="translate(0,0)scale(1000)" d="M.075 0 L0 .2 L.15 .2 Z" />
</svg>
<script type="text/javascript" >
d3.selectAll("path").on("mouseover", function (d) {
var selection = d3.select(this)
selection.transition().duration(500).style("opacity", 0.25);
});
d3.selectAll("path").on("mouseout", function() {
var selection = d3.select(this)
selection.transition().duration(500).style("opacity", 0.7);
});
</script>
</body>
我想不出一个好的解释，为什么发生这种情况。我也找不到在Internet Explorer中按预期方式运行蓝色三角形的方法。
的[SVG地图无法在Internet Explorer 10工作良好]可能重复（http://stackoverflow.com/questions/16983781/svg-map-not-working-well-in-internet-explorer -10） – 2015-01-27 04:59:21
这非常相似，但是接受的答案中的解决方法对我的用例不可行。问题中的示例包括“解决方法”版本以帮助找出问题。 – Mark 2015-01-27 09:26:28
原因是相同的 - 当元素有变换时，鼠标悬停检测的IE中的错误。我所知道的唯一解决方法是另一个问题中的问题，以及您自己发现的问题。 – 2015-01-27 10:18:03