Ich habe wirklich versucht, etwas SVG zu lernen. Aber Browser scheinen in ein richtiges altes Durcheinander geraten zu sein, das es rendert.
Nehmen Sie den folgenden HTML-Code:
%Vor%Zeigen Sie, dass es sich um einen modernen Browser handelt, und Sie sehen eine willkürliche Menge an Leerzeichen zwischen dem Rechteck und dem folgenden HTML-Absatz. (IE9 zeigt nichts an, aber niemand wird darüber überrascht sein.)
Firefox (Firebug) gibt nicht die Höhen der Elemente svg oder rect an. Es wird nur schwach und sagt "Auto".
Opera sagt, dass svg eine Höhe von 150px hat und 'auto' für rect sagt.
Chrome mens up und gibt Höhen für beide. 102px für die rect (offensichtlich einschließlich der Schlaganfall) und 428px für die svg .
Ich erwarte, dass das Element svg ein "dünner" Container wäre (d. h. nichts zu den Dimensionen seines Inhalts hinzufügt) und daher eine Höhe von 102 px hat.
Wer weiß, wie das richtige Verhalten sein sollte und wie ich das beheben könnte?
Sie haben nicht explizit definiert, welche Breite oder Höhe das SVG hat oder wo das Rechteck platziert ist oder welcher Teil des SVG von Interesse ist. Es ist kaum verwunderlich, dass Browser sich anders verhalten.
Versuchen Sie, eine Breite und Höhe zu definieren:
%Vor% Alternativ definieren Sie ein viewBox :
Oder beides:
%Vor%