SVG <text> 元素內的<a>元素在IE中沒有下划線</a>

Question

請檢查此插件：

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;
}

在chrome上，您將在懸停上看到一個下划線，但是在IE上沒有下划線。 我嘗試用CSS解決問題，但沒有成功。

Answer 1

在SVG中， text-underline行為與HTML有所不同。

在SVG中， 規范指出不應繼承。

Chrome和FF似乎放寬了該限制。

要在IE中解決此問題，只需更改CSS規則以包括text元素。

 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>