<a>元素中的svg <text>元素在Chrome中悬停时显示下划线

Question

标题基本概括了所有内容.<text>嵌套在<a>元素中的我的SVG 元素在鼠标悬停时获得下划线,但仅在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>

Answer 1

当你在jsfiddle中重现你的代码时,这不会发生,所以我猜你的样式表有这样的东西:

a:hover {
   text-decoration: underline;
}

尝试通过编写来覆盖此行为:

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