如何使 svg 图标（使用 <use> ）成为链接答案

【问题标题】：How to make an svg icon (which uses <use> ) a link如何使 svg 图标（使用 <use> ）成为链接
【发布时间】：2020-01-23 15:14:18
【问题描述】：

所以我有这些小的 svg 图标，如下代码：

                <svg class="icon icon-instagram">
                    <use xlink:href="img/symbol-defs.svg#icon-instagram"></use>
                </svg>

我需要使这些图标成为可点击的链接。我看过类似的问题，但有些人建议将其更改为 img （然后我将无法使用 fill css 属性），有些人建议在 svg 标记内使用文本。有没有办法让这些图标链接起来而不牺牲其他属性？

【问题讨论】：

有什么理由不能将其包装在标签中？
它不起作用。那是我的第一次尝试。

标签： html svg icons

【解决方案1】：

<a xlink:href="https://stackoverflow.com/">
  <text x="10" y="25">Stackoverflow</text>
</a>

【讨论】：

虽然此答案在技术上可能是正确的，但请提供有关如何使用此答案以及您认为它是正确的原因的上下文。