Google chrome svg<；文本>；内部元素<；a>；元素在Chrome中悬停时获得下划线

标题几乎说明了一切。嵌套在

---

当您使用时不会发生这种情况，所以我猜您的样式表有如下内容：

a:hover {
   text-decoration: underline;
}

尝试通过写入以下内容来覆盖此行为：

svg a:hover {
   text-decoration: none;
}

---

对于safari，我必须将svg元素包装在一个div中并应用样式

text-decoration: none !important;

到该部门（我使用的是sass）：

---

是的，就是这样。我甚至没有想到这一点，因为其他浏览器中没有下划线。我还需要在我的样式定义中添加：

a:-webkit any link

。

text-decoration: none !important;

.header__logo {
    text-decoration: none !important;  // Safari adds text decoration to    text element inside svg
    a:-webkit-any-link,
    a:hover {
        text-decoration: none;
    }
}