全宽和高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".此外,我必须删除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文件的内容.:-)