1. Inicio
  2. Pregunta y respuesta
  3. Ancho y alto completos SVG

Ancho y alto completos SVG

2012-02-21 25 views
8

El dilema: crear una imagen svg de ventana completa que llene la distorsión de aspecto WITH, SIN usar una etiqueta SVG. ¿Por qué no hay una etiqueta svg? Porque tengo la intención de cambiar el SVG más tarde (si no con frecuencia) en la vida de la página, y no he encontrado una manera fácil de hacerlo.Ancho y alto completos SVG

Los intentos fallidos:

<!-- for the record, my style are in a css file, 
     for example purposes they are style attrs--> 

    <!-- Working in Webkit but not in firefox, in firefox blocks stretching 
     and places the svg in the middle of the tag--> 
    <img src="my.svg" style="width:100%;height:100%; 
     position:fixed;top:0;left:0;bottom:0;right:0;" /> 

    <!-- Both Webkit and Firefox block distortion, so the svg 
     appears centered in the div rather than conforming to the div--> 
    <div style="width:100%;height:100%;position:fixed;top:0; 
     left:0;bottom:0;right:0;background-size:cover; 
     background-image:url(my.svg);" />

que también han tratado

background-size:contain; 
background-size:cover; 
background-size:100% 100%; 
background-postion: center center;

pero no hubo suerte.

Fuente

2012-02-21 Fresheyeball

+0

posible duplicado de [¿Cómo escalar un terco SVG incrustado con la etiqueta ?] (Http://stackoverflow.com/questions/644896/how-do-i-scale-a-stubborn-svg- embedded-with-the-object-tag) – givanse

+1

¿Dónde en mi publicación hay una etiqueta ''? – Fresheyeball

Respuesta

46

que tiene esto funcione en Firefox, Chrome y Safari usando

<img src="my.svg" style="width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;" />

El truco consistía en asegurarse de que el SVG me estaba mostrando tenía preserveAspectRatio = "none" establecido en la raíz. Además, tuve que eliminar viewBox en el SVG o asegurarme de que recortara el contenido de la imagen.

Por ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 5 3"> 
    <desc>Flag of Germany</desc> 
    <rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/> 
    <rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/> 
    <rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/> 
</svg>

esperamos que pueda tener control sobre el contenido de los archivos SVG que está tratando de mostrar. :-)

Fuente

2012-02-21 18:26:27

+0

Esto funcionó perfecto. ¡Aparentemente fue Adobe Illustrator el que me estaba metiendo la pata! – Fresheyeball

+4

El consejo 'preserveAspectRatio =" none "' realmente me salvó. ¡Gracias! – inorganik

+1

Para otros, tenga en cuenta que, obviamente, la posición: fija debe ser la posición: absoluta si desea que esto viva dentro de un padre. –

2

Aquí hay una solución jQuery. Como se puede ver, lo estoy usando con un SVG sin <svg>

El css

#bgImage{ 
    position:absolute; 
    left:0; 
    top:0; 
}

El html

<object width="10" height="10" id="bgImage" data="resources/runner.svg" type="image/svg+xml"></object>

El javascript

//resize the background image 
function resizeImage($selection){ 
    //get the ratio of the image 
    var imageRatio = $selection.width()/$selection.height(); 

    //get the screen ratio 
    var screenRatio = $(window).width()/$(window).height(); 

    //if the image is wider than the screen 
    if(imageRatio > screenRatio){ 
     $selection.height($(window).height()); //set image height to screen height 
     $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio 
    } 

    //if the screen is wider than the image 
    else{ 
     $selection.width($(window).width()); //set the image width to the screen width 
     $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio 
    } 
}

Ejecutar esto cada vez que desea cambiar el tamaño de la imagen, generalmente en "onresize" y "onload"

$(window).resize(function(){ 
    resizeImage($("#bgImage")); 
}

Fuente

2014-06-20 19:07:59 Adam

+0

quita el js en línea y te devolveré el voto – Fresheyeball

+0

¿Corregido? Dudo en eliminar el parámetro de selección jQuery, ya que me gusta la flexibilidad de esto. Supongo que solo llamar a resizeImage() sería más fácil, pero más limitado. – Adam

+0

@Fresheyeball upvote? – Adam

Cuestiones relacionadas

 Cuestiones relacionadas