IE/Edge link 围绕带有文本的 SVG 移动文本

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);
}