Полная ширина и высота SVG

Question

Дилемма: создать полноэкранное изображение SVG, которое заполняет С искажением формата, БЕЗ использования тега SVG.Почему нет тега SVG?Потому что я собираюсь заменить SVG позже (если не часто) в жизни страницы, и я не нашел простой способ сделать это.

Неудачные попытки:

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

Я также пытался

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

, но не повезло.

Answer 1

Я получил это для работы в Firefox, Chrome и Safari, используя

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

Хитрость заключалась в том, чтобы убедиться, что SVG, который я отображал, был установлен в корне preserveAspectRatio = "none". Также мне пришлось либо удалить viewBox в SVG, либо убедиться, что он плотно обрезал содержимое изображения.

Например:

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

Надеюсь, у вас есть контроль над содержимым файлов SVG, которые вы пытаетесь отобразить. : -)

Answer 2

Вот решение jQuery.Как вы видите, я использую его с SVG без <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
    }
}

Запустите это всякий раз, когда вы хотите изменить размер изображения, как правило, на «onresize» и «onload»

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