Heim > Web-Frontend > CSS-Tutorial > Warum verzerren sich SVG-Bildproportionen im „Element' von IE9?

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

Mary-Kate Olsen
Freigeben: 2024-10-27 02:52:02
Original
498 Leute haben es durchsucht

Why do SVG Image Proportions Skew in IE9's `` Element?

IE9 verzerrt SVG-Bildproportionen in Element

Bei Verwendung von CSS zum Festlegen der maximalen Höhe eines SVG-Bildes innerhalb eines 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 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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage