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

Question 1

Parece que debería ser fácil, pero no obtengo nada.

Quiero crear una página HTML que contenga una sola imagen SVG que se escale automáticamente para adaptarse a la ventana del navegador, sin desplazarse y conservando su relación de aspecto.

Por ejemplo, en este momento tengo una imagen SVG de 1024x768; si la ventana del navegador es 1980x1000, entonces quiero que la imagen se muestre a 1333x1000 (rellenar verticalmente, centrado horizontalmente). Si el navegador era 800x1000, quiero que se muestre a 800x600 (relleno 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 se está ampliando al ancho completo del navegador (para una ventana ancha pero corta) y produciendo un desplazamiento vertical, que no es lo que quiero.

¿Qué me estoy perdiendo?

Question 2

Qué tal si:

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 en position:absolutelugar de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(El uso position:fixedevita un escenario muy extremo de vinculación a un ancla de subpágina en la página y overflow:hiddenpuede garantizar que nunca aparezcan barras de desplazamiento (en caso de que tenga contenido adicional).

Answer 1

Parece que debería ser fácil, pero no obtengo nada.

Quiero crear una página HTML que contenga una sola imagen SVG que se escale automáticamente para adaptarse a la ventana del navegador, sin desplazarse y conservando su relación de aspecto.

Por ejemplo, en este momento tengo una imagen SVG de 1024x768; si la ventana del navegador es 1980x1000, entonces quiero que la imagen se muestre a 1333x1000 (rellenar verticalmente, centrado horizontalmente). Si el navegador era 800x1000, quiero que se muestre a 800x600 (relleno 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 se está ampliando al ancho completo del navegador (para una ventana ancha pero corta) y produciendo un desplazamiento vertical, que no es lo que quiero.

¿Qué me estoy perdiendo?

Answer 2

Inexplicablemente, intenté mover los atributos de estilo en línea a un bloque de estilo CSS en el encabezado, y luego funcionó. No sé por qué hizo la diferencia. (Aunque necesitaba agregar desbordamiento: oculto; de lo contrario, había un desplazamiento vertical de 4 píxeles).

Miral

Answer 3

175

Qué tal si:

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 en position:absolutelugar de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(El uso position:fixedevita un escenario muy extremo de vinculación a un ancla de subpágina en la página y overflow:hiddenpuede garantizar que nunca aparezcan barras de desplazamiento (en caso de que tenga contenido adicional).

Phrogz
fuente

38

Y un +1 tardío por dejar ese enlace 2 años después.

msanford

7

Tenga en cuenta que esta solución se basa en el viewBoxatributo.

ubershmekel

4

El vínculo sigue ahí, casi 4 años después. ¡Buen trabajo, @Phrogz!

Richard

10

Sí, gracias @Phrogz ... Y en caso de que alguna vez se caiga, hice una versión de codepen

Jay

5

Y +1 por más de 8 años

Sudhir Kaushik

Answer 4

38