Question

Please check this plunker:

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

中的SVG 元素

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

<a> element no underline in IE

1 个答案: