SVG-Dateien in HTML einbinden und mit Link verknüpfen

hallojs · 27 Februar 2014

Hallo,

ich möchte gerne eine SVG-Datei in eine HTML-Datei einbinden und mit einem Link verknüpfen. Dies ist mir im Prinzip auch gelungen, nur wird die SVG-Datei leider abgeschnitten dargestellt. Kann mit vielleicht jemand helfen, sodass die SVG-Datei in den unten angegebenen Maßen richtig dargestellt wird?

HTML:

HTML:

<a href="" class="svg">
    <object data="daten_vergessen_icon.svg" type="image/svg+xml" class="daten_vergessen" viewBox="0 0 25 25"></object>
</a>

CSS:

Code:

a.svg{
    position: relative;
    display: inline-block;
}

a.svg:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
}

.daten_vergessen{
    height: 25px;
    width: 25px;
}

Grüße hallojs

SirROG · 14 Januar 2016

Hallo hallojs

Wahrscheinlich verwendest du eine ältere Version vom Internet Explorer.
Denke mit den aktuellen Browsern erledigt sich dein Problem.

Also das unterstehende Beispiel geht sicherlich in Chrome, Internet Explorer 11 und grösser etc. ;)

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <meta content="ROG Innovation" name="author">
    <style>
     
      a.svg{
    position: relative;
    display: inline-block;
}
a.svg:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
}
.daten_vergessen{
    height: 25px;
    width: 25px;
}
     
    </style>
  </head>
  <body>
   <a title="Favorite" href="http://domain.com">
      <img class="daten_vergessen" title="svgbild" alt="svgbild" src="bild.svg">     
   </a>
  </body>
</html>

SVG-Dateien in HTML einbinden und mit Link verknüpfen

hallojs

Mitglied

SirROG

Mitglied

Neueste Beiträge