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

问题描述

这个困境：使一个全窗口svg图像填充WITH方面失真，无需使用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;

但没有运气。

推荐答案

我使用

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