8

以下のようなHTMLがあります。ビューボックスが 100x100 の SVG を作成します。(Chrome で) レンダリングすると、svg は幅 200 ピクセル (良好) でレンダリングされますが、高さは ~500 ピクセルで、テキストはページの下部から押し出されます。ウィンドウを大きくしたり小さくしたりしても影響はありません。SVG の高さがそれに応じて拡大または縮小するだけです。

svg の高さがまったく制限されないのはなぜですか? 縦横比1:1を自動的に維持する方法はありますか？SVG内のコンテンツは問題ありません。適切にスケーリングされます。これはいくつかの大きな頭痛の種を引き起こしています

<html>
  <head>
    <title>SVG Ahoy</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div style="width: 200px;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
          preserveAspectRatio="xMinYMin meet" version="1.1"></svg>
      <div>content below</div>
    </div>
  </body>
</html>
4

2 に答える 2

2

ここにprserveApsectRatioが設定されていますが、divに高さが表示されません。それが問題を引き起こしていますか？また、svgドキュメントを見ると、svgアイテムはデフォルトで100％の幅と高さになっています。高さと幅をピクセル値として明示的に設定してみて、それが役立つかどうかを確認してください。

于 2012-09-28T18:06:30.903 に答える