Warum skaliert diese SVG Grafik nicht in IE9 und 10 (Vorschau)?

IE scheint das fehlende Attribut preserveAspectRatio falsch zu handhaben. Sie können es in IE skalieren, indem Sie preserveAspectRatio="xMinYMin slice" wie hier gezeigt hinzufügen: Ссылка

Was IE jedoch zeigt, ist nicht das richtige Verhalten, und daher bewirkt diese Änderung, dass sich andere Browser anders verhalten als IE. (Microsoft glaubt jedoch, dass preserveAspectRatio unterstützt.)

Ich habe Ihre Einheiten oder Inhaltsbegrenzungsboxen nicht gründlich untersucht. Welchen Effekt wollen Sie wirklich erreichen?

SVGs skalieren nicht genauso wie Rasterbilder wie JPG, PNG und GIF, die eine klar definierte Größe haben.

Sie müssen auf Hacks zurückgreifen, um die gleiche Anzeige in den Browsern zu gewährleisten.

Versuchen Sie Folgendes:

Siehe Demo

Weitere Informationen

Das Problem ist, dass Sie Prozentsätze für Höhe und Breite verwenden, wie hier erklärt ( Ссылка ).

  

Wenn die Breite und die Höhe entweder als etwas so nutzlos wie 100% definiert sind oder wenn sie überhaupt nicht definiert sind, werden diese Browser raten, wie die Dimensionen auf den Punkten und Formen basieren sollen, die in definiert sind der Körper der SVG-Datei.

Ändere zu width=480 und height=360 und du solltest in Ordnung sein.

Eine weitere Option ist die Verwendung von Ansichtsfenstereinheiten. Auf diese Weise wird Ihre SVG entsprechend der Größe des Fensters skaliert:

Ссылка