google-chrome - svg元素内的元素在 Chrome 中悬停时得到下划线

Answer 1

当您在 jsfiddle 中复制代码时不会发生这种情况，所以我猜您的样式表有这样的内容：

a:hover {
   text-decoration: underline;
}

尝试通过编写覆盖此行为：

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

Answer 2

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

text-decoration: none !important;

到那个 div（我正在使用 sass）：

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