Workaround für den Webkitbug
object ist das Containerlement für Multimediaelemente schlechthin. Es ermöglicht die Angabe von Alternativinhalten, die angezeigt werden, wenn sich der Browser auf den Medientyp nicht versteht. Häufig wird der Tag bei Flashfilmen, etwa von Youtube eingesetzt, aber er eignet sich auch hervorragend für die Einbindung von SVG, die fast jeder moderne Browser anzeigen kann. Der Internet Explorer benötigt bis einschließlich der Version 8 dafür ein Plugin. Selbst die Einbindung des SVG via data/uri ist möglich, was zusätzliche Requests spart.
Das Designerherz könnte nicht höher schlagen, wenn die Webkitbrowser, ab der Version 4 nicht einen hässlichen Bug mitbringen würden. Wenn keine Hintergrundfarbe angegeben wird, zeigen sie das eingebette Objekt in seiner ganzen Eckigkeit mit blütenweißen Hintergrund. Das ist so gut wie nie erwünscht, es sei denn ein Diagramm ist rechteckig oder die Website hat einen weißen Hintergrund.
Als Workaraund mag manchmal das bewußte Verwenden von Farben oder Biildhintergründen dienen, ich habe noch einen weiteren Vorschlag.
Der Workaround beruht darauf, dass Webkitbrowser diese Darstellungsprobleme, bei der Einbindung als img nicht haben. Der object-Tag kann also zur Laufzeit mit JavaScript umgeschrieben werden, was eigentlich recht simpel ist.
Ich hatte den Anspruch
- kein JavaScript-Framework zu verwenden
- das Umschreiben nur für Webkit zu veranlassen
- nur SVG's zu erfassen, bei anderen Medieninhalten den Tag zu belassen
- ein mehrfach verwendbares Skript zu entwickeln
Teil des JavaScripts
var i=document.createElement("img");
i.src=e.data;
if(e.firstChild.nodeType == 3){
i.alt=e.firstChild.nodeValue;}
else i.alt="Die SVG-Grafik kann nicht angezeigt werden.";
p = e.parentNode;
p.replaceChild(i,e);
Es wird ein neues Bildelement erzeugt und der Inhalt des data-Feldes, welches den Pfad zur SVG enthält auf das src übertragen. Es wird noch überprüft, ob der Alternativinhalt aus Text besteht, der dann Inhalt der Alternativbeschreibung des Bildes wird. Sollte der Alternativinhalt kein Text sein, wird er ersetzt. Nachdem das Skript das Elternelement ermittelt hat wird das object durch ein img ersetzt.
Wäre nur ein Tag zu ersetzen, würde diesen kurzen Anweisungen schon ausreichen. Kniffliger ist es, alle obigen Voraussetzungen umzusetzen, was ich ohne einen Programmiermuttersprachler wie Thomas Meinke nicht geschafft hätte. Die Prüfung, ob das Element SVG-Content enthält
e.type=="image/svg+xml"length-Eigenschaft sich zur Laufzeit ändert. Der finale Code erfüllt alle Anforderungen:
Demo des Workarounds für Webkit
Der Workaround ist eher dort geeignet, wo SVG als Bilder verwendet werden und ist ein weiteres Argument dafür, SVG's auch heute schon einzusetzen.
Nachtrag 10.10.2010: Die aktuelle Beta vom Chrome 7 hat den Bug behoben.
geschrieben von Pawel