Creando un svg que se adapta a la altura del navegador pero tiene un ancho establecido

Im tratando de crear un svg en Illustrator y usarlo como una imagen de fondo para llenar hasta la parte superior e inferior de la página pero aún dentro de un div que tiene 950px de ancho y no tengo problemas.Creando un svg que se adapta a la altura del navegador pero tiene un ancho establecido

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve"> 
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/> 
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/> 
</svg>

Este es mi svg, como se puede ver, el ilustrador le ha dado elementos de ancho y alto. Quité éstos, así que podría ponerlos en el css:

#middle{ 
        width: 950px; 
        margin: 0px; 
        height: 100%; 
        float: left; 
        display: block; 
        background: url(../images/l.svg) no-repeat left top #00aeef;      
}

He intentado varias combinaciones diferentes de eliminación de los tamaños de la SVG y la adición de estilos en CSS, tales como:

background-size: cover; 
background-size: 950px cover; 
background-size: 100% 100%; 
background-size: contain;

pero nada Yo parece que funciona ¿Algunas ideas? Podría haber algo fundamental que simplemente no entiendo sobre svgs? El comportamiento, cuando puedo conseguir que muestre algo, parece ser que o bien se establece totalmente en tamaño, o se establece en tamaño y luego, cuando hago que la ventana sea más pequeña, reduce el ancho y mantiene la relación de aspecto.

su supone que este aspecto sea grande la ventana es:

The black curves on both sides are shapes inside the blue element with 950px width

Pero cuando hago la altura de la ventana más grande es el lado de la misma disapears, esto es usar

background-size: cover;

En el CSS, y sin dimensiones en svg.

The right side has dissapeared

cuando agrego un ancho establecido de este modo:

background-size: 950px cover;

Se muestra así:

Adding set width

Y si hago la ventana más pequeña es hace esto:

What the ? que es especialmente molesto.

EDITAR

Resto del CSS y HTML miradas de preocupación al igual que

CSS

/* Main Containers */ 
.center{ 
        margin: 0px auto; 
        width: 1200px; 
        height: 100%; 
} 
#left{ 
        width: 150px; 
        height: 100%; 
        display: block; 
        float: left; 
        background: #000000; 
} 
#middle{ 
        width: 950px; 
        margin: 0px; 
        height: 100%; 
        float: left; 
        display: block; 
        background: url(../images/l.svg) no-repeat left top #00aeef; 
        background-size: cover; 

} 
#right{ 
        width: 100px; 
        height: 100%; 
        display: block; 
        float: left; 
        background: #000000; 
}

HTML

<body> 
    <div class="center"> 


     <div id="left"> 
      <!-- Header --> 

      <!-- END Header --> 

     </div> 


     <!-- Nav --> 
     <div id="nav"> 

     </div> 
     <!-- END Nav --> 

     <div id="middle"> 


     </div> 

     <div id="right"> 

     </div> 
     <!-- Footer --> 

     <!-- END Footer --> 

    </div> 
</body>

Fuente

2012-09-01 bluefantail

encontrado una solución a mi problema

usando

preserveAspectRatio="none"

en el archivo SVG

así:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" > 
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/> 
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/> 
</svg>

Los tamaños se quitan de la svg completamente. No elimine las propiedades viewBox o enableBackground; estas son importantes.

Css este modo:

#middle{ 
        width: 950px; 
        margin: 0px; 
        height: 100%; 
        float: left; 
        display: block; 
        background: url(../images/l.svg) no-repeat left top #00aeef; 
        background-size: 100% 100%;     
}

* Este es el resultado *

Full screen

ventana grande

Small screen

Pequeño wi ndow

Fuente

2012-09-02 02:09:33 bluefantail

Así es como se hace eso. – bluefantail

Hasta ahora he probado esto trabajando en google chrome 21, y ff 14 – bluefantail

Uso del max-width propiedad de CSS.Prueba esto:

#middle{ 
        max-width: 950px; 
        margin: 0px; 
        height: 100%; 
        float: left; 
        display: block; 
        background: url(../images/l.svg) no-repeat left top #00aeef; 
        background-size: 950px 100%;     
}

Fuente

2012-09-02 00:05:13

Hola saludos, ¿en qué elemento? – bluefantail

El 'div' que contiene. Además, ¿contiene el div dentro de otro 'div', o simplemente el' cuerpo'? –

Acabo de actualizar mi respuesta. Trata eso. –

Creando un svg que se adapta a la altura del navegador pero tiene un ancho establecido

Respuesta

Cuestiones relacionadas