链接中的 SVG 跨度在 IE 中不起作用

Posted 2023-03-28

【中文标题】链接中的 SVG 跨度在 IE 中不起作用

【英文标题】：a SVG span inside a link not working in IE

【发布时间】：2019-10-17 12:56:09

【问题描述】：

需要在 <a> 和 SVG 之间添加 <span>，以便 javascript 可以从另一个文件中调用 SVG 内联。一切正常，但不是在 IE 中，我错过了什么吗？ （在 IE 中测试时，它甚至不知道这是一个链接，没有什么可点击的，而且我也有悬停效果，但在 IE 中什么都没有显示。）在 javascript 加载内联 SVG 后整理一个最终代码示例一起。

.icon svg
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin: 0;
  stroke-width: 1.5;
  stroke-linecap: round;


.icon-black svg
 stroke: #1A1A1A;
 

<a href="#">
<span class="icon icon-black" id="icon-arrow">
<svg id="icon-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linejoin="arcs"><path d="M12 19V6M5 12l7-7 7 7"/>
</svg>
</span>
</a>

【问题讨论】：

你的IE浏览器版本是多少？我已尝试测试您的代码，看来您的代码在 IE 9+ 浏览器上运行良好。结果like this.

【参考方案1】：

刚刚注意到，我错过了将 <span> 设置为 display: inline-block;