Warum verzerren sich SVG-Bildproportionen im „Element' von IE9?

IE9 verzerrt SVG-Bildproportionen in <img> Element

Bei Verwendung von CSS zum Festlegen der maximalen Höhe eines SVG-Bildes innerhalb eines <img> Element wird erwartet, dass das Bild proportional zu dieser Höhe skaliert wird. Allerdings können in IE9 bestimmte SVG-Bilder verzerrte Proportionen aufweisen.

Das Problem tritt insbesondere bei SVGs auf, die aus Polygonen und nicht aus Pfaden bestehen. Ein Beispiel für ein betroffenes Bild ist die SVG-Datei „crocs“ von Radiant Interactive: http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

Um diese Inkonsistenz zwischen den Browsern zu beheben, Es wird empfohlen, immer eine ViewBox für SVG-Bilder zu definieren und dabei die Attribute width und height aus dem <svg> wegzulassen. Element. Dieser Ansatz gewährleistet eine konsistente Skalierung über alle Browser hinweg.

Um die Auswirkungen verschiedener SVG-Attribute zu demonstrieren, wurde eine Testseite erstellt:

[Link zur Testseite]

Durch Vergleich der Ergebnisse in verschiedenen Browsern, man kann erhebliche Unterschiede in der Bildverarbeitung beobachten, die auf der Kombination von SVG-Attributen und CSS-Dimensionen basieren.

Das obige ist der detaillierte Inhalt vonWarum verzerren sich SVG-Bildproportionen im „Element' von IE9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!