web-dev-qa-db-ja.com

ブラウザウィンドウに合わせてSVG画像を拡大縮小する方法は？

これは簡単なはずのように思えますが、私は何かを得ていないだけです。

スクロールせずに、アスペクト比を維持しながら、ブラウザーウィンドウに合わせて自動的に拡大縮小する単一のSVG画像を含むHTMLページを作成したいと思います。

たとえば、現時点では1024x768のSVG画像があります。ブラウザのビューポートが1980x1000の場合、画像を1333x1000で表示します（垂直方向に塗りつぶし、水平方向の中央に配置します）。ブラウザが800x1000の場合、800x600で表示するようにします（水平方向に入力、垂直方向に中央揃え）。

現在、次のように定義されています：

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

ただし、これはブラウザーの幅全体に拡大し（幅は広いが短いウィンドウの場合）、垂直スクロールを生成しますが、これは私が望んでいることではありません。

私は何が欠けていますか？

layoutxhtmlsvgscalingaspect-ratio
83
Miral

どうですか：

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

または：

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

私のサイトには、5％のパディングがあり、position:absoluteの代わりにposition:fixedを使用していますが、この手法を（おおよそ）使用している例があります。
http://phrogz.net/svg/svg_in_xhtml5.xhtml

（position:fixedを使用すると、ページのサブページアンカーへのリンクという非常にエッジケースのシナリオを防ぐことができ、overflow:hiddenはスクロールバーが表示されないことを保証できます（余分なコンテンツがある場合）

157
Phrogz