Warum werden einige SVG-Bilder in IE9 unverhältnismäßig skaliert?

Behebung von Skalierungsproblemen mit SVG-Bildern in IE9

Bestimmte SVG-Bilder werden nicht proportional zu den angegebenen maximalen Höhen innerhalb des img-Elements skaliert, selbst wenn die Breite fehlt. Es ist zu beobachten, dass diese unverhältnismäßige Hochskalierung vor allem SVGs betrifft, die aus Polygonen bestehen, und nicht solche, die mithilfe von Pfaden erstellt wurden.

Verstehen der Diskrepanz

Die Inkonsistenz ist auf eine mangelnde Standardisierung bei der Handhabung des viewBox-Attributs zurückzuführen. Eine ViewBox definiert explizit die Koordinaten und Abmessungen des SVG-Inhalts, was eine ordnungsgemäße Skalierung ermöglicht. Browser interpretieren viewBox jedoch unterschiedlich.

Im betroffenen Beispiel fehlt der SVG ein viewBox-Attribut. Daher interpretiert IE9 die Breiten- und Höheneigenschaften des SVG-Elements (und nicht des Bildelements) für die Skalierung, was zu einer unverhältnismäßigen Hochskalierung führt.

Behebung des Problems

Um eine konsistente Skalierung über alle Browser hinweg sicherzustellen Stellen Sie sicher, dass Sie eine viewBox für Ihr SVG-Bild angeben und dabei die Breiten- und Höhenattribute des SVG-Elements weglassen. Dieser Ansatz stellt dem Browser eine explizite Anleitung zur Verfügung und beseitigt die Unsicherheit, die zu einer unverhältnismäßigen Skalierung in IE9 führt.

Das obige ist der detaillierte Inhalt vonWarum werden einige SVG-Bilder in IE9 unverhältnismäßig skaliert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!