使用svg时，锚元素无法在EDGE上打开href

Question

I have the following code:

<a target="_blank" href={this.props.FacebookUrl}>
  <svg className="icon svg-facebook">
     <use xlinkHref={'/Content/icons/sprite/icons-common.svg#facebook'} />
  </svg> 
</a>

Generated Code:


<a target="_blank" href="https://www.facebook.com/facebook" data-reactid=".dzu29bnjgg.0.0.0.2.0.1.0.0.0">
  <svg class="icon svg-facebook" data-reactid=".dzu29bnjgg.0.0.0.2.0.1.0.0.0.0">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Content/icons/sprite/icons-common.svg#facebook" data-reactid=".dzu29bnjgg.0.0.0.2.0.1.0.0.0.0.0">
    </use>
  </svg>
</a>

Clicking on the Anchor opens the Facebook Url besides on EDGE

What's the problem?

Answer 1

Try this. Give the svg the attribute focusable="false" and tell me if that fixes it.