全宽和全高 SVG [英] Full width and height SVG

问题描述

困境:制作一个全窗口 svg 图像，填充纵横扭曲，而不使用 SVG 标签.为什么没有svg标签?因为我打算在页面生命周期的后期(如果不是经常的话)换掉 SVG，而且我还没有找到一种简单的方法来做到这一点.

The dilemma: make a full window svg image that fills WITH aspect distortion, WITHOUT using an SVG tag. Why no svg tag? Because I intend on swapping out the SVG later (if not frequently) in the life of the page, and I have not found an easy way to do that.

失败的尝试:

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

但没有运气.

推荐答案

我在 Firefox、Chrome 和 Safari 中使用

I got this to work in Firefox, Chrome, and Safari using

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

诀窍是确保我显示的 SVG 在根中设置了 preserveAspectRatio="none".此外，我必须要么删除 SVG 中的 viewBox，要么确保它紧紧地裁剪了图像内容.

The trick was to make sure the SVG I was displaying had preserveAspectRatio="none" set in the root. Also, I had to either delete the viewBox in the SVG, or make sure it tightly cropped the image content.

例如:

<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 文件的内容.:-)

Hopefully you have control over the content of the SVG files you are trying to display. :-)

这篇关于全宽和全高 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！