css - para - svg responsive bootstrap

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

Question

El objetivo es que el elemento <svg> se expanda al tamaño de su contenedor principal, en este caso un <div> , sin importar cuán grande o pequeño sea ese contenedor.

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 ser establecer el atributo viewBox en el elemento <svg> .

viewBox="0 0 widthOfContainer heightOfContainer"

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

Entonces la solución obvia es usar% widths y% heights en esos elementos también. ¿Pero esto incluso tiene que hacerse? Especialmente, ya que <img src=test.svg > funciona bien y se expande / contrae sin problemas con alturas y anchuras explícitas <rect> .

Si elementos como <rect> y otros elementos como este tienen que tener sus anchuras y alturas definidas en porcentajes, ¿hay alguna manera en Inkscape de establecerlo de modo que todos los elementos con el documento <svg> usen anchos de porcentaje, alturas, etc. .. en lugar de dimensiones fijas?

Answer 1

@robertc tiene razón, pero también debe notar que svg, #container hace que la svg se svg, #container exponencialmente para cualquier cosa que no sea 100% (una para #container y otra para svg ).

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

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

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

Answer 2

El viewBox no es la altura del contenedor, es del tamaño de tu dibujo. Define tu viewBox para que tenga 100 unidades de ancho, luego define tu rect para que sea de 10 unidades. Después de eso, independientemente de lo grande que escales el SVG, el rect será del 10% del ancho de la imagen.

Answer 3

Lo que funcionó para mí recientemente es eliminar todos los atributos height="" y width="" de la etiqueta <svg> y todas las etiquetas secundarias. Luego puede usar la escala usando un porcentaje del alto o ancho del contenedor padre.

Answer 4

Para tu iphone puedes usar en tu cabeza balise:

"width=device-width"

Answer 5

Supongamos que tengo un SVG que se ve así:

Y quiero ponerlo en un div y hacerlo llenar el div responsivamente. 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.

Luego guardo este archivo como un nuevo archivo SVG y obtengo los datos de ruta desde este archivo. Ahora en HTML, el código que hace 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 el ancho y alto de SVG están configurados al 100%, ya que queremos que llene el contenedor vertical y horizontalmente, pero el ancho y alto de viewBox son los mismos 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 preparadas para documentos y cambio de tamaño:

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

¡Espero eso ayude!