SVG: Im <OBJECT>-Tag anklickbar machen (Teil 1)

Wer eine SVG wie im Post beschrieben einbettet, wird feststellen das man die Grafik nicht wie gewohnt verlinken kann (Beispiel 1). Auch die Verwendung eines onklick-Events führt nicht zum Erfolg (Beispiel 2).

Beispiel 1 (funktioniert nicht)

<a href="javascript:alert('Test')">
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</a>

Beispiel 2 (funktioniert nicht)

<object data="logo.svg" onlick="alert('Test')" type="image/svg+xml" width="167" height="77">
  <param name="src" value="logo.svg" />
  <param name="wmode" value="transparent" />
  <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
</object>

Abhilfe schafft hier das Schließen des Links (</a>) vor dem OBJECT-Tag und etwas CSS.

Beispiel 3 (funktioniert)

<div class="svglink" id="svg1">
  <a href="javascript:alert('Test')"></a>
  <object data="logo.svg" type="image/svg+xml" width="167" height="77">
    <param name="src" value="logo.svg" />
    <param name="wmode" value="transparent" />
    <img src="logo.jpg" alt="http://www.ufz.de/" width="167" height="77" />
  </object>
</div>

Der Parameter wmode ist hier nicht optional, sonst ist die Grafik im IE nicht anklickbar.

Die CSS-Klasse svglink

.svglink {
  position: relative;
}  
.svglink a, .svglink object  {
  position: absolute;
  width: inherit;
  height: inherit;
}  
.svglink a  {
  /* Die (beiden!) Eigenschaften sind wichtig,
  da im IE die SVG sonst nicht anklickbar ist. */ 
  background-image: url(1x1transp.gif);
  background-color: transparent;
  z-index: 2;
}
.svglink object  {
  z-index: 1;
}

Bei dem als Hintergrund verwendeten Bitmap, handelt es sich um eine 1 Pixel große GIF-Datei mit eingeschalteter Transparenz (sie ist auch Teil des unten angehängten Downloads).

Weitere CSS-Eigenschaften

Die Größe der Grafik sollte in em angegeben werden, um ein korrektes Skalieren zu ermöglichen. Deshalb ist hier ein weiterer DIV-Selektor notwendig, dieser korrigiert gleichzeitig das Fehlen der inherit CSS-Eigenschaft im IE6 und IE7.

/* IE7 kennt kein inherit,
daher der zusätzliche Selektor */
#svg1, #svg1 a  {  
  width: 10.4375em;  /* 167px / 16 = 10,4375em */  
  height: 4.8125em;  /*  77px / 16 =  4,8125em */ 
}

komplettes Beispiel