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>