Nach ein wenig Recherche habe ich festgestellt, dass Chrome und Opera Bilder innerhalb eines foreignObject rendern, wenn sie einen absoluten Pfad haben. Firefox rendert Bilder nur, wenn sie im Format "uri" vorliegen, da keine externen Ressourcen geladen werden.
Ich habe mehrere Methoden ausprobiert, aber ich kann keine Möglichkeit finden, dieses Verhalten zu erkennen. Ich habe beispielsweise versucht, die Dimensionen des Bildes im foreignObject zu überprüfen, aber sie haben immer Recht, Firefox zeichnet einfach ein transparentes Rechteck mit der gleichen Bildgröße.
Weißt du wie das geht?
CODE Diese Situation ist schwer zu reproduzieren, aber Sie können es auf diese Weise testen:
:
%Vor%Bei Chrome ist das Logobild sichtbar, bei Firefox nicht. Der SVG-Code ist Base64-codiert, das ist der ursprüngliche Code:
%Vor%Wenn die Unterstützung des Benutzeragenten (Browsers) für diese Funktion nicht verfügbar ist, können Sie die Fallback-Technik verwenden. Wenn also ein Browser diese Funktion nicht unterstützt, wird 'Kein Fremdobjekt unterstützt' angezeigt:
%Vor%Oder wenn Sie es in JavaScript erkennen möchten, können Sie es am einfachsten versuchen:
%Vor%oder Sie können hasFeature
verwenden %Vor%Parameter
Funktion Ist ein DOMString, der den Featurenamen darstellt.
Version Ist ein DOMString, der die Version der Spezifikation darstellt, die das Feature definiert.
<foreignObject> -Tag, das auf ein externes PNG- oder GIF-Bild verweist. Wahrscheinlich einfacher, wenn das Bild eine einzige Farbe hat. <img> -Tag, z. %Code%
Dies funktioniert mit Firefox, da es die Zeichenfläche nicht beschmutzt und sie schreibgeschützt macht, wenn ein SVG-Bild darin geladen wird. Ich bin mir nicht sicher, ob Chrome immer noch die Leinwand verunstaltet. Wenn dies der Fall ist, wird Schritt 4 fehlschlagen.
Hier ist ein Code für Schritt 3.
%Vor%Tags und Links javascript image svg browser-feature-detection