html - SVG <a> 元素内的 <text> 元素在 IE 中没有下划线

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 中，the specification states that it shouldn't inherit.

Chrome 和 FF 似乎已经放宽了该限制。

要在 IE 中解决此问题，只需更改 CSS 规则以包含文本元素即可。

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>