Siehe unten stehenden Code - Ich versuche, inline svg in meine Website einzubinden. Ich folge einem sauberen Vorschlag , das svg switch-Element zu verwenden, damit es funktioniert degradiert anmutig auf älteren Browsern. Die Idee ist, dass Browser, die Svg unterstützen, das erste Element im Switch-Block verwenden; diejenigen, die nicht alle svg-Tags ignorieren und nur das im zweiten Element (d. h. das Fremdobjekt-Tag) des Switch-Blocks vergrabene img zeigen.
Es funktioniert wirklich gut ... außer dass mein svg (das Notenblatt) unbedingt Textelemente enthält und sie (wie auch das fremde Objekt) von älteren Browsern gerendert werden.
Ironischerweise ist es einfach, dies in IE8 und darunter mit bedingten Kommentaren zu behandeln.
Für andere ältere Browser habe ich Javascript innerhalb des fremden Objekts, das die Klasse des SVG-Textes neu definiert. Es funktioniert ... aber es fühlt sich an wie ein echter Hack.
Gibt es einen besseren Weg, dies zu tun (besseres JavaScript, eine CSS-Lösung, eine andere Art, den Svg-Text zu machen ...)?
Wie auch immer, hier sind die Grundlagen des Codes:
%Vor% Hier ist eine Idee für andere Browser als IE8 und früher (die das JS-basierte shiv benötigen, um das text -Element zu erkennen.) für eine CSS-Lösung,
Die Idee hier ist, dass Browser, die SVG inline unterstützen, dies tun, indem sie die SVG-Elemente in den Namensraum "http://www.w3.org/2000/svg" einfügen, der dann im css. Getestet in Firefox 12, IE9, Chrome 18 Opera 11.6, die das SVG zeigen, und Firefox 3.6 und Safari 5.0, die den Fallback zeigen. JSFiddle bei Ссылка
Tags und Links javascript html svg