Cómo escalar la imagen SVG para llenar la ventana del navegador?

Question

Cómo escalar la imagen SVG para llenar la ventana del navegador?

Esto parece que debería ser fácil, pero simplemente no estoy recibiendo algo.

Quiero hacer una página HTML que contenga una sola imagen SVG que se ajuste automáticamente a la ventana del navegador, sin ningún desplazamiento y conservando su relación de aspecto.

Por ejemplo, en este momento tengo una imagen SVG de 1024x768; si la vista del navegador es 1980x1000, entonces quiero que la imagen se muestre en 1333x1000 (relleno vertical, centrado horizontalmente). Si el navegador era 800x1000 entonces quiero para mostrar a 800x600 (rellenar horizontalmente, centrado verticalmente).

Actualmente lo tengo definido así:

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

Sin embargo, esto está escalando a todo el ancho del navegador (para una ventana ancha pero corta) y produciendo desplazamiento vertical, que no es lo que quiero.

¿Qué me estoy perdiendo?

72

scaling xhtml layout svg aspect-ratio

Author: Miral, 2011-04-13

Source

1 answers

score 134 · Accepted Answer

Qué tal:

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

O:

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

Tengo un ejemplo en mi sitio usando (aproximadamente) esta técnica, aunque con un 5% de relleno alrededor, y usando position:absolute en lugar de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(El uso de position:fixed evita un escenario de casos extremos de enlace a un ancla de subpágina en la página, y overflow:hidden puede garantizar que no aparezcan barras de desplazamiento (en caso de que tenga contenido adicional.)