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

Parece que debería ser fácil, pero simplemente no obtengo nada.¿Cómo escalar la imagen SVG para llenar la ventana del navegador?

Quiero hacer una página HTML que contenga una sola imagen SVG que se escale automáticamente para ajustarse 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 (llenar verticalmente, centrado horizontalmente). Si el navegador era 800x1000, entonces quiero que se muestre a 800x600 (relleno horizontal, centrado verticalmente).

En este momento tengo que define de este modo:

<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á ampliando a todo el ancho del navegador (por una amplia ventana pero corto) y la producción de desplazamiento vertical, que no es lo que querer.

¿Qué me estoy perdiendo?

Fuente

2011-04-13 Miral

Inexplicablemente, he intentado mover la línea Atributos de estilo a un bloque de estilo CSS en el encabezado, y luego funcionó. No sé por qué marcó la diferencia. (Aunque necesité agregar un desbordamiento: oculto; de lo contrario, existía un desplazamiento vertical de 4 píxeles). – Miral

119

¿Qué tal:

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

Tengo un ejemplo en mi sitio usando (más o menos) esta técnica, aunque con un 5% de relleno por todas partes, y el uso de position:absolute en lugar de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Usando position:fixed evita un escenario de borde caso muy de vincular a un anclaje sub-página en la página, y overflow:hidden puede asegurar que no hay barras de desplazamiento aparecerá siempre (en caso de tener contenido extra.)

Fuente

2011-04-13 04:33:45 Phrogz

+24

Y un retraso de +1 para dejar ese enlace 2 años después. – msanford

Tenga en cuenta que esta solución se basa en el atributo 'viewBox'. – ubershmekel

El enlace está allí, casi 4 años después. Buen trabajo, @Phrogz! – Richard

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

Respuesta

Cuestiones relacionadas