<a> 元素内的 svg <text> 元素在 Chrome 中悬停时获得下划线答案

【问题标题】：svg <text> element inside <a> element gets underline on hover in Chrome<a> 元素内的 svg <text> 元素在 Chrome 中悬停时获得下划线
【发布时间】：2013-03-11 10:30:14
【问题描述】：

标题几乎说明了一切。我的 SVG <text> 嵌套在 <a> 元素中的元素在鼠标悬停时得到下划线，但仅限于 Chrome。 Firefox 或 IE 中没有下划线。

我应该设置一些属性来删除 Chrome 中的下划线吗？

这是我的代码

<a xlink:href="#" class="node">
    <title>Some title</title>
    <circle class="little" r="50" cx="60" cy="360" fill="#0088cc"></circle>
    <text font-size="20px" font-weight="bold" fill="white" text-decoration="none" text-anchor="middle" dominant-baseline="central" x="60" y="360">Some text</text>
</a>

【问题讨论】：

标签： google-chrome svg

【解决方案1】：

当你 reproduce your code in a jsfiddle 时不会发生这种情况，所以我猜你的样式表是这样的：

a:hover {
   text-decoration: underline;
}

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

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

【讨论】：

是的，就是这样。没想到，其他浏览器都没有下划线
我还需要在我的样式定义中添加：a:-webkit-any-link。

【解决方案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;
    }
}

【讨论】：