如何在SVG中嵌入链接？自定义图标添加href无效的位置疑问

不管你用的是字体图标（比如Font Awesome这类）还是图片格式的图标，直接给图标元素加href属性都不会生效——因为只有<a>这类链接专属标签才支持href属性。正确的做法是把图标嵌套在<a>标签内部，把href写在<a>上。

情况1：使用字体图标（以Font Awesome为例） #

错误写法（无效）：

<i class="fa fa-github" href="https://github.com"></i>

正确写法：

<a href="https://github.com">
  <i class="fa fa-github"></i>
</a>

情况2：使用图片图标 #

错误写法（无效）：

<img src="icon.png" alt="图标" href="/target-page">

正确写法：

<a href="/target-page">
  <img src="icon.png" alt="图标">
</a>

额外提示 #

• 要是想去掉<a>标签的默认下划线，加一行CSS就行：a { text-decoration: none; }
• 要给图标加hover这类点击反馈效果，直接给<a>或者图标元素写CSS样式就可以

内容的提问来源于stack exchange，提问作者Buura