Ich habe HTML wie das unten. Ich erstelle ein SVG mit einer Viewbox von 100x100. Wenn gerendert (in Chrome) Die SVG rendert sich selbst als 200px weit (gut) aber ~ 500px hoch und der Text wird vom unteren Rand der Seite geschoben. Das Vergrößern oder Verkleinern meines Fensters hat keinen Einfluss - der SVG wächst oder verkleinert sich entsprechend in der Höhe.
Warum ist der Svg in keiner Weise in der Höhe eingeschränkt? Gibt es eine Möglichkeit, das Seitenverhältnis 1: 1 automatisch beizubehalten? Der Inhalt innerhalb des SVG ist in Ordnung - er skaliert entsprechend. Dies verursacht einige große Kopfschmerzen
%Vor%Sie haben prserveApsectRatio hier eingestellt, aber ich sehe keine Höhe auf Ihrem div. Stellt dies ein Problem dar? Wenn Sie sich die Svg-Dokumentation ansehen, werden Svg-Elemente standardmäßig auf 100% Breite und Höhe eingestellt . Versuchen Sie, seine Höhe und Breite explizit als Pixelwerte festzulegen und sehen Sie, ob das hilft.
Fügen Sie die SVG in ein <img> -Tag ein: <img src="path_to_svg" />
Formatieren Sie das Bild: {width: 100%; Höhe: Auto;}
Das Einstellen der Höhe auf auto ist das Geheimnis. So ist selbst das preserveAspectRatio-Attribut optional. (Wenn Sie es in ein Tabellenlayout einfügen, wird die Kompatibilität mit Internet Explorer beeinträchtigt.)