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

Hier noch eine weitere Variante, welche praktikabler bei Funktionsaufrufen ist. Auf die Größenangabe über den DIV-Selektor wurde hier verzichtet, weiterhin wird als Parent-Element der <SPAN>-Tag verwendet, was ein horizontales Aneinanderreihen der Grafiken erleichtert.
Die hier beschriebene Methode (ohne style-Attribut) ist von der Struktur her, etwas sauberer.

Beispiel

<span class="svglink" style="width: 167px; height: 77px;">
  <a href="javascript:alert('Test')" style="width: 167px; height: 77px;"></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>      
</span>

Die CSS-Klasse svglink

.svglink {
  position: relative;
}
span.svglink  {
  display: inline-block;
}
/* IE7-Hack, gleicht das Aussehen etwas an */
*+html .svglink  {
  padding: 0 0.25em 0.25em 0;
}  
.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;
}

Der Unterschied zu der hier beschriebenen Methode, ist die Zuweisung von display: inline-block; bei der Verwendung des <SPAN>-Tags.
Es kann parallel mit dem <DIV>-Tag gearbeitet werden.

komplettes Beispiel