SVG resmi tarayıcı penceresini dolduracak şekilde nasıl ölçeklenir?

Bu kolay olacak gibi görünüyor, ama bir şey anlamıyorum.

Hiçbir kaydırma yapmadan ve en boy oranını koruyarak tarayıcı penceresine sığacak şekilde otomatik olarak ölçeklenen tek bir SVG resmi içeren bir HTML sayfası yapmak istiyorum.

Örneğin, şu anda 1024x768 boyutunda bir SVG resmim var; tarayıcı görüntü alanı 1980x1000 ise, görüntünün 1333x1000'de görüntülenmesini istiyorum (dikey olarak doldurun, yatay olarak ortalayın). Tarayıcı 800x1000 ise 800x600 boyutunda görüntülenmesini istiyorum (yatay olarak doldurun, dikey olarak ortalayın).

Şu anda şu şekilde tanımladım:

<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>

Ancak bu, tarayıcının tam genişliğine (geniş ancak kısa bir pencere için) kadar ölçekleniyor ve dikey kaydırma üretiyor, ki bu istediğim şey değil.

Neyi kaçırıyorum?

— Miral
kaynak

Açıklanamaz bir şekilde, satır içi stil niteliklerini kafadaki bir CSS stil bloğuna taşımayı denedim ve bundan sonra işe yaradı. Neden bir fark yarattığını bilmiyorum. (Taşma eklemem gerekse de: gizli - aksi halde 4 piksellik dikey kaydırma vardı.)

— Miral

178

Peki ya:

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

Veya:

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

Sitemde (kabaca) bu tekniği kullanan bir örnek var, her ne kadar% 5 dolgu ile de olsa ve position:absolutebunun yerine position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Kullanımı position:fixed, sayfadaki bir alt sayfa bağlantısına bağlanmanın çok uç durum senaryosunu önler ve overflow:hiddenhiçbir kaydırma çubuğunun görünmemesini sağlayabilir (fazladan içeriğiniz olması durumunda.)

— Phrogz
kaynak

Ve bu bağlantıyı 2 yıl sonra bıraktığım için bir geç +1.

— msanford

Bu çözümün viewBoxözniteliğe bağlı olduğunu unutmayın.

— ubershmekel

Bağlantı yaklaşık 4 yıl sonra hala oradadır. İyi iş, @Phrogz!

— Richard

Evet, teşekkürler @Phrogz ... Ve her ihtimale karşı, bir kodepen sürümü yaptım: codepen.io/cyanos/full/XbXxOQ

— Jay

Ve 8 yıldan uzun süredir +1

— Sudhir Kaushik