Warum werden meine SVGs im IE9 falsch skaliert, aber nur einige davon?

SVG-Proportionen in IE9 für bestimmte Bilder verzerrt

Bei der Verwendung von SVGs innerhalb von img-Elementen können unerwartete Skalierungsprobleme auftreten. In Internet Explorer 9 werden bestimmte SVG-Dateien möglicherweise falsch skaliert und behalten ihre ursprünglichen Proportionen nicht bei. Dies kann trotz der Angabe der maximalen Höhe über CSS auftreten.

Die Diskrepanz entsteht bei der Verwendung von SVGs, die aus Pfaden und Polygonen bestehen. Beispielsweise wird das in der Frage erwähnte „crocs.svg“-Bild nicht korrekt skaliert, während das „groovy.svg“-Bild dies tut.

Lösung: Stellen Sie sicher, dass ViewBox vorhanden ist, und lassen Sie die Breiten-/Höhenattribute von Elementen weg

Um dieses Problem zu beheben und eine konsistente Skalierung über alle Browser hinweg sicherzustellen, wird empfohlen, in Ihrem SVG-Element immer ein viewBox-Attribut anzugeben. Lassen Sie jedoch die Attribute „width“ und „height“ leer.

Auf diese Weise definieren Sie explizit die Abmessungen des SVG und ermöglichen Browsern, die CSS-Eigenschaft „max-height“ entsprechend zu interpretieren. Es gewährleistet eine konsistentere Skalierung über verschiedene Browser hinweg.

Weitere Informationen finden Sie auf dieser Testseite: [Link zur Testseite]. Auf dieser Seite finden Sie verschiedene Beispiele für SVG-Attribute in Kombination mit CSS-Breiten- und Höhenangaben. Durch den Vergleich der Skalierung in verschiedenen Browsern können Sie die Auswirkungen dieser Attribute auf die SVG-Wiedergabe beobachten.

Das obige ist der detaillierte Inhalt vonWarum werden meine SVGs im IE9 falsch skaliert, aber nur einige davon?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!