超链接SVG <use>标签

Question

我无法使用<use>标签超链接一个图标。 我创建了一个SVG图标系统，并将其保存在外部源上（https://css-tricks.com/lodge/svg/16-svg-icon-system-external-source/）。 我尝试了几个选项，但没有成功。

HTML代码：

 <svg class="icon-LinkedIn">
    <use xlink:href="symbol-defs.svg#icon-LinkedIn">
    <a href='https://www.linkedin.com/'></a> 
    </use>
  </svg>

尝试次数：

1.

    <a href='https://www.linkedin.com/'>
    <use xlink:href="symbol-defs.svg#icon-LinkedIn">
    </use>
    </a> 

 </svg>

2.

    <use xlink:href="symbol-defs.svg#icon-LinkedIn"
     xlink:href='https://www.linkedin.com/'>
    </use>


 </svg>

3.

<svg class="icon-LinkedIn">


    <use xlink:href="symbol-defs.svg#icon-LinkedIn"
     xlink:href='https://www.linkedin.com/'>
    </use>


 </svg>

SVG:

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>


<symbol id="icon-LinkedIn" viewBox="0 0 32 32">
<title>LinkedIn</title>
<path class="path1" d="M16 32c-8.837 0-16-7.163-16-16s7.163-16 16-    16c8.837 0 16 7.163 16 16s-7.163 16-16 16zM16 30.080c7.776 0 14.080-6.304 14.080-14.080s-6.304-14.080-14.080-14.080c-7.776 0-14.080 6.304-14.080 14.080s6.304 14.080 14.080 14.080zM8.96 12.876v9.306h3.014v-9.306h-3.014zM10.665 8.32c-1.031 0-1.705 0.695-1.705 1.607 0 0.894 0.654 1.608 1.666 1.608h0.019c1.051 0 1.706-0.715 1.706-1.608-0.020-0.912-0.655-1.607-1.686-1.607zM19.569 12.876c-1.6 0-2.317 0.903-2.717 1.537v-1.318h-3.015c0.040 0.873 0 9.306 0 9.306h3.015v-5.197c0-0.278 0.020-0.556 0.099-0.755 0.218-0.556 0.714-1.131 1.547-1.131 1.091 0 1.527 0.853 1.527 2.104v4.979h3.014l0-5.336c0-2.858-1.487-4.189-3.471-4.189z"></path>
</symbol>

</defs>
</svg>

- Victor

---

我假设你已经看过了这个链接: https://css-tricks.com/svg-use-with-external-reference-take-2/ - Moob

Answer 1

试试这个：

<a href='https://www.linkedin.com/'>
    <svg class="icon-LinkedIn">
       <use xlink:href="symbol-defs.svg#icon-LinkedIn">
       </use>
    </svg>
</a> 

在svg上包装锚点标签 jsFiddle

- Pedram