SVG <text>元素中<a>元素在IE

Question

无下划线

请检查该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; 
} 

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