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

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>
<h3 id="Benutzerdefiniertes-Styling">Benutzerdefiniertes Styling</h3>
<p>Um die Elemente richtig zu positionieren, fügen Sie das folgende CSS hinzu:</p>
<pre class="brush:php;toolbar:false">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.