SVG-тэг занимает дополнительное пространство

Question

Так что я получаю странную проблему с размером элемента SVG в HTML5. Это занимает гораздо больше места, чем я подозревал. Каждый маленький прямоугольник в изображении представляет собой прямоугольный элемент с шириной и высотой «20».

Элемент SVG должен иметь высоту и ширину 20 * 10 = 200, но вместо этого имеет размеры 680x508.

Вы можете просмотреть проверенную элемент здесь SVG ->http://i.stack.imgur.com/xrofn.png

HTML, выглядит примерно так:

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

Следует отметить, что я бегу Node.js и mustache.js.

Редактировать: По-видимому, SVG что-то делает, когда он не уверен относительно ширины/высоты. Установка вручную решает проблему.

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

Answer 1

Видовое окно SVG, по-видимому, определяется родительским элементом.

http://www.w3.org/TR/SVG/coords.html утверждает, что

Агент пользователя SVG ведет переговоры с родительским агентом пользователя, чтобы определить видовой экран, в котором агент пользователя SVG может вынести документ ..

Вы можете указать размер окна просмотра SVG с использованием widht и высоты

<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

Значение по умолчанию для атрибутов ширины и высоты на элементе < svg> составляет 100%, что означает, что окно просмотра SVG зависит от контейнера, в котором он находится. Обычно это определяется CSS.

Вы можете установить атрибуты ширины и высоты, если хотите, но для этого также можно использовать только CSS, как в this example.