CODEWITHSUNDEEP
htmlcsssvghyperlinksprite
Victor
Victor

Reputation: 87

Hyperlink SVG <use> tags

I am unable to hyperlink an icon using a <use> tag. I created an SVG icon system and saved it on an external source (https://css-tricks.com/lodge/svg/16-svg-icon-system-external-source/). I have attempted a couple of options and had no success.

HTML Code:

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

Attempts:

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>

Upvotes: 3

Views: 3287

Answers (1)

Pedram
Pedram

Reputation: 16575

Try this:

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

wrap anchor tag on svg

jsFiddle

Upvotes: 4

Related Questions