Question

标题几乎说明了一切。嵌套在<text>元素中的我的SVG <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>

Answer 1

当你reproduce your code in a 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;
    }
}

<a> element gets underline on hover in Chrome</a> </text>中的svg <text>元素

2 个答案: