SVG <text> element inside <a> element no underline in IE

Question

Please check this plunker:

https://plnkr.co/edit/jqPx9qpN3W1Jrix2axPw?p=preview

<div width="100px">
  <svg width="100px" viewBox="0 0 100 100">
      <a xlink:href="#" class="node">
          <text transform="translate(50 50)">hh2</text>
      </a>
  </svg>
</div>

a:hover {
    text-decoration: underline;
}

On chrome you will see an underline on hover, but on IE there is no underline. I tried solving with css without success.

Answer 1

In SVG text-underline behaves a little differently than in HTML.

In SVG, the specification states that it shouldn't inherit.

It appears Chrome and FF have relaxed that restriction.

To get around this in IE, just alter the CSS rule to include the text element.

 a:focus text, a:hover text { color: #23527c; text-decoration: underline; } 

  <h1>Hello Plunker!</h1> <div width="100px"> <svg width="100px" viewBox="0 0 100 100"> <a xlink:href="#" class="node"> <text transform="translate(50 50)">hh2</text> </a> </svg> </div>