svg <text> element inside <a> element gets underline on hover in Chrome
google-chrome, svg
Solution
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;
}
Problem
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> ```