SVG-Tag nimmt zusätzlichen Platz

Question

So bekomme ich ein seltsames Größenproblem mit dem SVG-Element in HTML5. Es nimmt erheblich mehr Platz in Anspruch, als ich vermutet habe. Jedes kleine Rechteck im Bild ist ein Rect-Element mit einer Breite und Höhe von "20".

Das SVG-Element sollte eine Höhe und Breite von 20 * 10 = 200 haben, hat aber stattdessen Abmessungen von 680x508.

Sie können das kontrollierte svg Element sehen hier ->http://i.stack.imgur.com/xrofn.png

Die HTML etwa wie folgt aussieht:

<svg> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
    </svg> 

Es sollte beachtet werden, dass ich node.js und mustache.js leite.

Edit: Offensichtlich macht SVG etwas, wenn es nicht sicher über die Breite/Höhe ist. Wenn Sie es manuell einstellen, wird das Problem gelöst.

<svg height="200" width="200"> 

Answer 1

Das SVG-Ansichtsfenster scheint vom übergeordneten Element bestimmt zu werden.

http://www.w3.org/TR/SVG/coords.html besagt, dass

Der SVG-User-Agent verhandelt mit seinem übergeordneten User-Agenten das Ansichtsfenster, in denen der SVG-User-Agent, um zu bestimmen, das Dokument machen kann ..

Sie die Größe angeben des SVG-Ansichtsfensters unter Verwendung von Breite und Höhe

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
</svg> 

Answer 2

Der Standardwert für die Attribute width und height auf dem < svg> Element ist 100%, was bedeutet, dass das SVG-Ansichtsfenster von dem Container abhängt, in dem es sich befindet. Normalerweise wird dies durch CSS bestimmt.

Sie können die Attribute width und height einstellen, wenn Sie möchten, aber es ist auch möglich, nur CSS dafür zu verwenden, wie in this example.