5

そのため、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">
4

2 に答える 2

7

SVG ビューポートは、親要素によって決定されるようです。

http://www.w3.org/TR/SVG/coords.htmlは次のように述べています

SVG ユーザー エージェントは、その親ユーザー エージェントとネゴシエートして、SVG ユーザー エージェントがドキュメントをレンダリングできるビューポートを決定します。

width と height を使用して、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>
于 2012-11-03T16:11:56.850 に答える
1

<svg> 要素の width 属性と height 属性のデフォルト値は 100% です。これは、SVG ビューポートがコンテナに依存することを意味します。通常、これは CSS によって決定されます。

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

于 2012-11-09T09:36:37.840 に答える