Warum variieren die SVG-Bildproportionen in Internet Explorer 9?

Problem mit der Skalierung der Bildproportionen in Internet Explorer 9

SVG-Bilder werden in Internet Explorer 9 oft mit unerwarteten Proportionen angezeigt, selbst wenn CSS zur Angabe einer maximalen Höhe verwendet wird. Diese Diskrepanz wird deutlich, wenn man das Verhalten verschiedener SVG-Dateien vergleicht.

Angenommen, wir haben ein SVG-Bild mit natürlichen Abmessungen von 200 x 200 Pixel und einer maximalen Höhe von 30 Pixel, die in CSS definiert ist:

<code class="css">img {
    max-height: 30px;
}</code>

In den meisten Browsern wird dieses SVG-Bild proportional auf eine Höhe von 30 Pixel skaliert. In Internet Explorer 9 wird es jedoch möglicherweise stattdessen mit 30 x 200 Pixeln angezeigt.

Dieses Problem scheint mit der Art der verwendeten SVG-Elemente zusammenzuhängen. Im problematischen SVG besteht das Bild aus Polygonen, während es im korrekt skalierten SVG aus Pfaden besteht.

Um eine konsistente Skalierung über alle Browser hinweg sicherzustellen, wird empfohlen, immer eine viewBox anzugeben, aber wegzulassen die Breiten- und Höhenattribute Ihres SVG-Elements. Wenn Sie diese Vorgehensweise befolgen, können Sie die Kompatibilität Ihrer SVG-Bilder in Internet Explorer 9 und anderen Browsern verbessern.

Das obige ist der detaillierte Inhalt vonWarum variieren die SVG-Bildproportionen in Internet Explorer 9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!