Aus verschiedenen Quellen entnehme ich, dass der Vektoreffekt="Nicht-Skalierung" in Svg in den aktuellen Versionen Opera, Firefox und Chrome funktionieren sollte. (Nicht sicher über IE10).
Allerdings kann ich es nur in Opera und Firefox verwenden, und nur wenn es direkt als Bild eingebettet ist, funktioniert es nicht, wenn es als Hintergrundbild in CSS skaliert wird.
Meine Fragen:
Warum nicht Chrom?
Warum nicht in Hintergrundbildern?
Gibt es eine Standardmethode, die ich in allen aktuellen Browsern verwenden kann?
HTML:
%Vor%CSS:
%Vor%Ich habe keine Ahnung, was unter der Haube passiert, aber es gibt eine einfachere Lösung, zumindest für Inline-SVGs (nicht sicher über Hintergründe). Änderung:
%Vor%zu:
%Vor% Außerdem müssen Sie sicherstellen, dass Sie viewBox definiert für das svg-Dokument haben.
Laut dieser Antwort ist die Verwendung von object ohnehin eine bessere Vorgehensweise. Hier ist ein anständiger Blog-Beitrag, der (für die browserübergreifende Kompatibilität) Folgendes empfiehlt:
Ich habe diese letztere Option nicht getestet, aber wenn sie funktioniert, ist sie viel einfacher als diese Lösung.
>EDIT: Ich entdeckte, dass SVGs als eingebettete Objekte "Hover" - und "Click" -Ereignisse störten, also knickte ich schließlich ein und entschied, dass ich SVGs vollständig einbetten musste. Aber ich hatte kein Interesse daran, jeden einzelnen einzufügen, also habe ich am Anfang meiner Javascript-Datei (ich benutze JQuery) Folgendes:
%Vor% Jetzt anstelle von <img src="svg.svg"/> kann ich <div class="deferred-load" data-load="svg.svg"></div> schreiben.
Natürlich funktioniert das nicht, wenn Javascript aktiviert ist. Aber es ist viel besser, als all das hässliche XML einzufügen.
Unter der Haube müssen UAs das SVG zeichnen und es dann in ein Bitmap umwandeln, um ein Bild (einschließlich eines Hintergrundbildes) zu erstellen. Der einfachste Weg besteht darin, den Nicht-Bild-Rendering-Code wiederzuverwenden und dann die Bitmap zu skalieren, aber wenn die Bitmap skaliert wird, wird sie sowohl unscharf als auch nicht richtig skaliert. Der richtige Weg ist, herauszufinden, in welcher Größe Sie schließlich die Bitmap zeichnen wollen, und den SVG-Zeichenkode dazu zu bringen, darin zu zeichnen.
Dieser Fehler wurde gerade in Firefox behoben. Du kannst es heute in einer Nightly versuchen oder auf die Veröffentlichung im September warten.