12

インライン HTML で使用できるように、.svg ファイルにエクスポートした svg グラフィックを購入しました。ドキュメントのタグに挿入しました<body>が、画面の全幅と全高を埋めたいと思っています。の幅と高さの属性を設定<svg>しようposition: absoluteとtop, right, bottom, left: 0しました. しかし、何も機能しませんでした。viewBox"0 0 screen_width screen_height"position: absolutetop, right, bottom, left: 0

ここにsvg自体があります：http://pastebin.com/y8kqf1bD

Full width and height SVGのすべてのオプションを試しましたが、それらも機能しません。

どうすればそれができるか考えていますか？

よろしくお願いします！

4

1 に答える 1

16

<svg>要素は、高さと幅の属性を使用してサイズ調整されるため、

<svg height="100%" width="100%">
</svg>

画面いっぱいになります。

<html>さらに、とタグの両方を<body>style="width:100%;height:100%" に設定して、それらが画面全体を覆うようにする必要があります。完全なフルスクリーン矩形は次のとおりです。

<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:0;">
  <svg height="100%" width="100%">
    <rect fill="lime" width="100%" height="100%"/>
  </svg>
</body>
</html>

必要に応じて、スタイルシートを介してこれを行うこともできます。

html, body, svg {
  width: 100%;
  height: 100%;
  margin: 0;
}
<html>
<body>
  <svg>
    <rect fill="lime" width="100%" height="100%"/>
  </svg>
</body>
</html>

于 2013-10-22T20:50:09.577 に答える