1. Dom
  2. Pytanie i odpowiedź
  3. Pełna szerokość i wysokość SVG

Pełna szerokość i wysokość SVG

2012-02-21 18 views
8

Dylemat: wykonaj pełny obraz svg w oknie, który wypełnia zniekształcenie aspektu, BEZ używania znacznika SVG. Dlaczego nie ma tagu svg? Ponieważ zamierzam zamienić SVG później (jeśli nie często) w życie strony, a nie znalazłem łatwego sposobu na zrobienie tego.Pełna szerokość i wysokość SVG

nieudanej próby:

<!-- 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);" />

Próbowałem również

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

ale bez powodzenia.

Źródło

2012-02-21 Fresheyeball

+0

możliwe duplikat [Jak mogę przeskalować uporczywy svg osadzonych z tagiem ?] (Http://stackoverflow.com/questions/644896/how-do-i-scale-a-stubborn-svg- wbudowany-z-obiektem-znacznikiem) – givanse

+1

Gdzie w moim poście znajduje się znacznik ''? – Fresheyeball

Odpowiedz

46

Dostałem to do pracy w Firefox, Chrome i Safari używając

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

Sztuką było upewnić się, że SVG byłem wyświetlania miał preserveaspectratio = "none" ustawiony w korzeniu. Musiałem też usunąć widok w SVG lub upewnić się, że mocno przyciął zawartość obrazu.

Na przykład:

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

Mam nadzieję, że masz kontrolę nad zawartością plików SVG, które próbujesz wyświetlić. :-)

Źródło

2012-02-21 18:26:27

+0

To działało idealnie. Najwyraźniej to Adobe Illustrator zdziałał ze mną! – Fresheyeball

+4

Wskazówka "preserveAspectRatio =" none "" naprawdę mnie uratowała. Dzięki! – inorganik

+1

Dla innych, zauważ, że oczywiście pozycja: fixed powinna być pozycją: absolute, jeśli chcesz, aby ta istniała wewnątrz rodzica. –

2

Oto rozwiązanie jQuery. Jak widać, używam go z SVG bez <svg>

CSS

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

HTML

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

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

Uruchom ten Kiedykolwiek chcesz zmienić rozmiar obrazu, zazwyczaj na "onresize" i "onload"

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

Źródło

2014-06-20 19:07:59 Adam

+0

usuń wbudowany js, a zrobię ci poprawkę – Fresheyeball

+0

Napraw? Waham się usunąć parametr wyboru jQuery, ponieważ podoba mi się elastyczność tego. Przypuszczam, że samo wywołanie resizeImage() byłoby łatwiejsze, ale bardziej ograniczone. – Adam

+0

@ Witryna fresheyeball? – Adam

Powiązane problemy

 Powiązane problemy