svg <text> element inside <a> element gets underline on hover in Chrome

Question

The title pretty much says it all. My SVG <text> element nested within an <a> element gets an underline on mouse hover, but only in Chrome. There is no underline in Firefox or IE.

Is there some attribute I should set to remove the underline in Chrome as well?

Here is my code

<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

This doesn't happen when you reproduce your code in a jsfiddle, so I'm guessing your stylesheet has something like this:

a:hover {
   text-decoration: underline;
}

Try overriding this behavior by writing:

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

Answer 2

For safari I had to wrap the svg element in a div and apply the style

text-decoration: none !important;

to that div (I am using 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;
    }
}