Znacznik SVG zajmuje więcej miejsca

Question

Dostaję więc dziwny rozmiar z elementem SVG w HTML5. Zajmuje znacznie więcej miejsca, niż przypuszczałem. Każdy mały prostokąt na obrazku jest prostym elementem o szerokości i wysokości "20".

Element SVG powinien mieć wysokość i szerokość 20 * 10 = 200, ale ma wymiary 680x508.

Można zobaczyć kontrolowanego element SVG tutaj ->http://i.stack.imgur.com/xrofn.png

HTML wygląda tak:

<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> 

Należy zauważyć, że używam node.js i mustache.js.

Edytuj: Wygląda na to, że SVG robi coś, gdy nie ma pewności co do szerokości/wysokości. Ustawienie ręczne rozwiązuje problem.

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

Answer 1

Okienko SVG wydaje się być określone przez element nadrzędny.

http://www.w3.org/TR/SVG/coords.html stwierdza, że ​​

Środek użytkownik SVG negocjuje z jego agenta użytkownika rodzic określenia rzutnię do której agent użytkownika SVG można renderować dokumentu ..

Można określić rozmiar rzutni SVG przy użyciu szer i wysokość

<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

wartością domyślną szerokość i wysokość atrybutów w elemencie SVG> < jest 100%, co oznacza, że ​​rzutnia SVG zależy od kontenera. Zazwyczaj jest to określane przez CSS.

Możesz ustawić atrybuty szerokości i wysokości, jeśli chcesz, ale w tym celu można używać tylko CSS, jak w this example.