SVGタグが余分なスペースを取っています

Question

HTML5のSVG要素に奇妙なサイズの問題が発生しています。それは私が疑ったよりもかなりのスペースを取っています。画像の各小さな矩形は幅と高さが「20」のrect要素です。

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ビューポートの幅と高さを使用して

<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によって決定されます。

必要に応じて幅と高さの属性を設定できますが、this exampleのようにCSSのみを使用することもできます。