困境:制作一个完整的窗口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;
但没有运气。
答案 0 :(得分:50)
我使用
在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”。另外,我必须删除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文件的内容。 : - )
答案 1 :(得分:2)
这是一个jQuery解决方案。如您所见,我将其与没有<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
}
}
每当您想要调整图像大小时运行此选项,通常是在&#34; onresize&#34;和&#34; onload&#34;
$(window).resize(function(){
resizeImage($("#bgImage"));
}