Question

在IE和Edge中应用悬停样式时，我遇到了SVG元素意外消失的麻烦。这似乎是由于使用具有较大偏移量的viewBox引起的。

在Chrome和Firefox中，以下代码绘制了一个红色的圆圈，将其悬停时会变为黄色。但是，在IE / Edge中，当鼠标移开时，圆圈消失并且不再出现。

circle {
  fill: #f00
}

circle:hover {
  fill: #ff0
}

<!DOCTYPE html>
<html>

<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="214700 0 100 100">

    <circle cx="214749" cy="50" r="10"></circle>  

  </svg>

</body>

</html>

我认为这与viewBox偏移有关，因为将圆的x坐标更改为cx =“ 214748”可以恢复正确的行为。

谁能解释为什么会这样？

示例：jsbin

在Windows 10的Edge 42.17134.1.0和IE / 11 11.165.17134.0中进行了测试。

编辑： 已向Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18322785/

报告了问题

ViewBox的Edge / IE SVG CSS悬停问题

0 个答案: