Warum sind meine SVG-Bilder im IE9 verzerrt? Die Rolle von ViewBox und konsistenter Skalierung.

SVG-Bildproportionen in IE9 und die Rolle von ViewBox

Bei der Verwendung von SVG-Bildern innerhalb eines Bei der Skalierung wird erwartet, dass die natürlichen Proportionen des Bildes erhalten bleiben. In IE9 kann dieses Verhalten jedoch je nach Struktur der SVG-Datei variieren.

Problem:
Bestimmte SVGs, insbesondere solche, die aus Polygonen bestehen, können in IE9 nicht proportional skaliert werden wenn es in einem Element mit einem CSS-Eigenschaftssatz für maximale Höhe. Dies führt zu einem gestreckten oder verzerrten Bild.

Grund:
Der Unterschied im Skalierungsverhalten zwischen SVGs, die Polygone und Pfade enthalten, wird auf das Vorhandensein oder Fehlen eines viewBox-Attributs innerhalb der zurückgeführt SVG-Datei.

Lösung:
Um eine konsistente Skalierung über alle Browser hinweg sicherzustellen, wird empfohlen, in der SVG-Datei immer ein viewBox-Attribut anzugeben. Dieses Attribut definiert den Koordinatenraum für das SVG-Bild. Indem Sie die Breiten- und Höhenattribute des

Beispiel:
Der folgende Code demonstriert diese Lösung:

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<polygon points="..." />
</svg></code>

Durch Einbindung Eine ViewBox, IE9 und andere Browser skalieren das SVG-Bild konsistent und behalten dabei sein Seitenverhältnis bei, unabhängig vom Vorhandensein von Polygonen oder Pfaden.

Das obige ist der detaillierte Inhalt vonWarum sind meine SVG-Bilder im IE9 verzerrt? Die Rolle von ViewBox und konsistenter Skalierung.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!