带有文本的SVG周围的IE / Edge链接会移动文本

Question

我有以下HTML：

<a href="/">
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="48"/>
        <text y=72>
            <tspan x=50 text-anchor="middle">Hello World</tspan>
        </text>
    </svg>
</a>

当我将鼠标悬停在SVG上时，文本向右移动。我检查是否添加了任何CSS，可能是一些填充，但根本没有添加任何内容。当我删除悬停时，文本会保持移位。

有什么想法吗？感谢。

Answer 1

我的解决方案很差（我还没找到另一个）：

a:hover text, 
a:active text {
  transform: translateX(0);
}