1
Ich kann kein Symbol mit einem <use>-Tag verknüpfen. Ich habe ein SVG-Symbolsystem erstellt und auf einer externen Quelle gespeichert (https://css-tricks.com/lodge/svg/16-svg-icon-system-external-source/). Ich habe ein paar Optionen versucht und hatte keinen Erfolg.Hyperlink SVG <use> Tags
HTML-Code:
<svg class="icon-LinkedIn">
<use xlink:href="symbol-defs.svg#icon-LinkedIn">
<a href='https://www.linkedin.com/'></a>
</use>
</svg>
Versuche:
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>
Ich nehme an, Sie haben sich angeschaut: https://css-tricks.com/svg-use-with-external-reference-take-2/ – Moob