Warum werden meine SVGs im Internet Explorer nicht richtig skaliert und wie kann ich das beheben?

SVGs werden im IE nicht richtig skaliert

Warum passiert das?

IE hat einen bekannten Fehler, bei dem SVGs nicht richtig skaliert werden, wenn beides der Fall ist Die Breite und Höhe werden nicht explizit angegeben.

Wie kann ich das Problem beheben?

Um dieses Problem zu beheben Im IE kann ein von Nicolas Gallagher entdeckter Trick angewendet werden. Diese Technik verwendet eine Element, das vom IE korrekt skaliert wird. Durch Platzieren einer mit dem gleichen Seitenverhältnis wie das SVG innerhalb des <div> Wenn es die SVG-Datei enthält, wird die SVG-Datei gezwungen, in der richtigen Größe gerendert zu werden.

Implementierung

Hier ist der aktualisierte Code mit dem Trick:

<div>

Benutzerdefiniertes Styling

Um die Elemente richtig zu positionieren, fügen Sie das folgende CSS hinzu:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Mit diesen Anpassungen sollte das SVG im Internet korrekt skaliert werden Entdecker.

Das obige ist der detaillierte Inhalt vonWarum werden meine SVGs im Internet Explorer nicht richtig skaliert und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!