Question

Internet Explorer中的鼠标悬停行为似乎取决于我为transform属性指定的值以及d属性中点的大小。

在提供的示例中，在Internet Explorer中，仅当指针位于路径元素的绘制区域内时，红色三角形才显示鼠标悬停行为。当鼠标在三角形路径的边界框内移动时，会触发蓝色三角形的鼠标悬停行为。

此问题在Chrome和Firefox中无法重现。

<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中按预期工作。

Answer 1

我已针对此IE问题解决了类似的问题。我在这里发布链接，而不是两次发布相同的答案。

https://stackoverflow.com/a/28435700/307039

SVG路径鼠标悬停在IE中表现不正确

1 个答案: