Workaround für den SVG-Webkit-Bug

ohne JavaScript

Safari und Chrome haben einen Bug. Wenn SVG über den object-Tag eingebunden werden, stellen sie transparenten Hintergrund weiss dar.

Diese Grafik wird nicht mit JavaScript bearbeitet und zeigt den Unterschied. Der (eigentlich) transparente Hintergrund wird in Webkitbrowser weiss dargestellt.

mit JavaScript

Hier wird JavaScript genutzt, um den object-Tag für Webkitbrowser in einen img-Tag umzuschreiben. Dadurch zeigt die Grafik den gewünschten transparenten Hintergrund.

Auch Flashvideos nutzen den object-Tag. Hier darf die Umschreibung natürlich nicht erfolgen. Das JavaScript muss deshalb unterscheiden, was für eine Mediendatei der Tag enthält.

Es sind viele Medientypen möglich, da der benutzte Tag das Element für Multimediainhalte schlechthin ist.

Die nächste Datei ist wieder ein Objekt, welche eine SVG enthält. Der Tag wird umgeschrieben.

Um dem Hintergrund eines Flashobjektes transparent zu nutzen, kann einfach innerhalb der Parameter ein <param name="wmode" value="transparent"> verwendet werden.