¿Cómo hacer que un elemento <svg> se expanda o contraiga a su contenedor principal?

El objetivo es que el elemento <svg> se expanda al tamaño de su contenedor principal, en este caso un <div>, sin importar qué tan grande o pequeño sea ese contenedor.¿Cómo hacer que un elemento <svg> se expanda o contraiga a su contenedor principal?

El código:

<style> 
    svg, #container{ 
     height: 100%; 
     width: 100%; 
    } 
</style> 

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > 
     <rect x="0" y="0" width="100" height="100" /> 
    </svg> 
</div>

La solución más común a este problema parece estar estableciendo el atributo viewBox en el elemento <svg>.

viewBox="0 0 widthOfContainer heightOfContainer"

Sin embargo, esto no parece funcionar en los casos en los elementos dentro del elemento <svg> tienen anchuras y/o alturas predefinidas. Por ejemplo, el elemento <rect>, en el código anterior, tiene su ancho y alto explícitamente establecidos.

Así que la solución obvia es usar% anchos y% de altura en esos elementos también. ¿Pero esto incluso tiene que hacerse? Especialmente, dado que <img src=test.svg > funciona bien y se expande/contrae sin problemas con alturas y anchos <rect> establecidos explícitamente.

Si elementos como <rect>, y otros elementos como él, tiene que tener sus anchuras y alturas definidas en porcentajes, hay una manera en Inkscape para configurarlo de manera que todos los elementos con la <svg> documento anchuras uso porcentuales, alturas, etc .. en lugar de dimensiones fijas?

Fuente

2012-01-18 user782860

Guarde el svg como un archivo, que lo referencia como una imagen, como y de esa manera puede usar el ancho: 100% o alto: 100% – Burimi

Posible duplicado de [¿Cómo puedo hacer una escala svg con su contenedor principal ?] (http://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container) – Charles

La viewBox no es la altura del contenedor, es del tamaño de su dibujo. Defina que su viewBox tenga 100 unidades de ancho, luego defina que su rect sea de 10 unidades. Después de eso, independientemente de lo grande que escale el SVG, el rect tendrá un 10% del ancho de la imagen.

Fuente

2012-01-18 23:41:50 robertc

+22

Pero la pregunta es: ¿cómo escalar el SVG? –

@AdrianLang La escala ocurre automáticamente cuando establece un tamaño en el objeto SVG, como ya se hizo en el código en la pregunta. [Aquí hay una versión fija del ejemplo] (http://jsfiddle.net/robertc/8KVtU/). – robertc

Tienes razón, genial, que en realidad funciona para mí. Supongo que mi problema eran las propiedades de alto y ancho en mi elemento raíz svg. –

@robertc está en lo cierto, pero también hay que notar que svg, #container hace que el SVG que reducirse de manera exponencial para nada más que 100% (una vez para #container y una vez para svg).

En otras palabras, si apliqué 50% h/w a ambos elementos, en realidad es 50% de 50%, o .5 * .5, lo que equivale a .25 o 25% de escala.

Un selector funciona bien cuando se usa como @robertc sugiere.

svg { 
    width:50%; 
    height:50%; 
}

Fuente

2013-02-06 00:27:42

Esto se debe a que su selector 'svg, # container' coincide con _both_ el elemento' svg' dom * y * el elemento dom '# container'. Creo que en su lugar buscabas 'svg # container', pero la especificación de un padre no es necesaria si estás usando una ID de todos modos. – Nit

¿No es eso exactamente lo que dije, "una vez para #container y una vez para svg"? –

Oh perdón, tienes razón, pero tu respuesta está un poco extrañamente redactada, lo que lleva al malentendido. Parece que estás hablando de un posible problema al principio. – Nit

para tu iPhone Usted podría utilizar en su baliza cabeza:

"width=device-width"

Fuente

2014-04-29 16:42:36 vincent

lo que ha funcionado para mí recientemente es eliminar todas las height="" y width="" atributos de la etiqueta <svg> y todas las etiquetas hijo. Luego puede usar la escala usando un porcentaje del alto o ancho del contenedor padre.

Fuente

2014-12-18 22:00:40

¿Puedes dar un ejemplo de trabajo? No puedo hacer que esto haga nada. – Michael

Supongamos que tengo una SVG que se parece a esto:

Y quiero ponerlo en un div y hacer que se llene el div responsablemente. Mi forma de hacerlo es la siguiente:

Primero abro el archivo SVG en una aplicación como inkscape. En Archivo-> Propiedades del documento, establezco el ancho del documento en 800px y la altura en 600px (puede elegir otros tamaños). Luego ajusto el SVG en este documento.

Entonces guardar este archivo como un nuevo archivo SVG y obtener los datos de la trayectoria de este archivo. Ahora en HTML el código que hace que la magia es el siguiente:

<div id="containerId">  
    <svg 
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    x="0" 
    y="0" 
    width="100%" 
    height="100%" 
    viewBox="0 0 800 600" 
    preserveAspectRatio="none"> 
     <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/> 
    </svg> 
</div>

Tenga en cuenta que la anchura y la altura de SVG se establecen en 100%, ya que queremos que se llene el contenedor vertical y horizontalmente, pero la anchura y la altura de viewBox es la misma que el ancho y alto del documento en inkscape, que es 800px X 600px. Lo siguiente que debe hacer es configurar preserveAspectRatio en "ninguno". Si necesita más información sobre este atributo, aquí hay un buen link. Y eso es todo lo que hay que hacer.

Una cosa más es que este código funciona en casi todos los navegadores principales, incluso en los antiguos, pero en algunas versiones de Android e iOS necesitas usar algún código javascrip/jQuery para mantenerlo constante. Uso lo siguiente en las funciones de documento listo y cambio de tamaño:

$('#svgId').css({ 
    'width': $('#containerId').width() + 'px', 
    'height': $('#containerId').height() + 'px' 
});

Espero que ayude!

Fuente

2015-02-11 00:07:01

+1 para la nota preserveAspectRatio. Después de cazar alto y bajo para obtener un SVG para realmente estirar (no escalar) a un div, esta fue la respuesta correcta. – adelphus

@Gazoris, gracias por esta maravillosa respuesta. tener pregunta sobre lo mismo. ¿Qué pasa si mi svg está anidado? por ej., i desea mostrar SVG 1 y 2 condicionalmente y debe tener anchura y altura del contenedor.

me pueden ayudar en esto. –

@Reza Baradaran: Genius. – danMad

¿Cómo hacer que un elemento <svg> se expanda o contraiga a su contenedor principal?

Respuesta

Cuestiones relacionadas