1. 首页
  2. 问答
  3. 全宽和高SVG

全宽和高SVG

2012-02-21 61 views
8

困境：制作一个完整的窗口svg图像，填充WITH aspect变形，而不使用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;

，但没有运气。

来源

2012-02-21 Fresheyeball

+0

可能重复[如何缩放与标记嵌入的顽固svg？]（http://stackoverflow.com/questions/644896/how-do-i-scale-a-stubborn-svg-嵌入的对象标签） – givanse 2014-05-20 23:01:32

+1

我的帖子在哪里是''标签？ – Fresheyeball 2014-05-21 03:57:36

回答

46

我得到这个在火狐，Chrome和Safari使用

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

诀窍是让工作确保我显示SVG有preserveAspectRatio =“无”根设置。另外，我不得不删除SVG中的viewBox，或者确保它严格裁剪图像内容。

例如：

<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文件的内容控制。 :-)

来源

2012-02-21 18:26:27

+0

这工作完美。显然，它是Adobe Illustrator，搞乱了我！ – Fresheyeball 2012-02-22 07:19:27

+4

'preserveAspectRatio =“none”'提示真的救了我。谢谢！ – inorganik 2012-12-19 20:42:59

+1

对于其他人，请注意明显的位置：固定应该是position：absolute，如果您希望它住在父级内。 – 2014-02-24 04:17:38

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")); 
}

来源

2014-06-20 19:07:59 Adam

+0

删除内联js，我会upvote you – Fresheyeball 2014-06-20 21:44:32

+0

修复？我很犹豫要删除jQuery选择参数，因为我喜欢这种灵活性。我想只是调用resizeImage（）会更容易，但更多的限制。 – Adam 2014-06-24 02:55:37

+0

@Fresheyeball upvote？ – Adam 2014-07-29 23:42:50

相关问题

 相关问题