html - 超链接 SVG 标签

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>

Answer 1

试试这个:

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

在 svg 上包裹 anchor 标签

jsFiddle