Chrome 中 Link 中 SVG 的奇怪错误

Question

我为悬停在链接上时的下划线动画编写了一些 CSS，在 Firefox 中一切正常，但在 Chrome 中我发现了一个错误（？）：

我有一些 SVG 社交图标包裹在 <a></a> 和 border-radius 或 50% 中，以将它们显示为圆圈。但是，当我将鼠标悬停在 我的其他 <a> 标签 上时，SVG 图标会闪烁并获得 方形 背景。 我在codepen上创建了一个小例子。

为什么会发生这种情况——文本链接和 SVG 链接不应该相互影响，不是吗？有没有人知道如何解决它？

Answer 1

删除 svg 元素上的内联样式。 您在 svg 上有绝对位置，我认为这就是导致您的大多数问题的原因。