Html 如何制作拉伸而不是平铺的 SVG 背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11658173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one make a SVG background that stretches rather than tiles?
提问by Glycan
I have a SVG background I want to use, and I can't figure out how to make it stretch over the whole page, let alone be a background. Could someone help?
我有一个想要使用的 SVG 背景，但我不知道如何让它在整个页面上延伸，更不用说成为背景了。有人可以帮忙吗？
(The W3Schools pages, on both SVG nor on backgrounds, gave me nothing).
（W3Schools 页面，无论是 SVG 还是背景，都没有给我任何信息）。
<object data="background.svg" type="image/svg+xml" width="100%" height="100%">does not exactly work.
<object data="background.svg" type="image/svg+xml" width="100%" height="100%">不完全有效。
回答by Aero Wang
I think you are asking if you can make the SVG to distort and stretch like a PNG would do. This is unfortunately not impossible unless your SVG codes themselves are set up that way (say if your SVG are generated by illustrator, they simply won't do it).
我想您是在问是否可以使 SVG 像 PNG 一样扭曲和拉伸。不幸的是，这并非不可能，除非您的 SVG 代码本身就是这样设置的（假设您的 SVG 是由 illustrator 生成的，他们根本不会这样做）。
The only way to do it at the moment is to hand code the SVG. For example, instead of drawing a diagonal line with a set angle you can tell the SVG to connect top left corner to bottom right corner. If you have the SVG, I might be able to tell you how to hand code it. (If your SVG is complicated like Phrogz's tiger, it likely won't be possible...)
目前唯一的方法是手动编码 SVG。例如，您可以告诉 SVG 将左上角连接到右下角，而不是绘制具有设定角度的对角线。如果你有 SVG，我也许可以告诉你如何手动编码。（如果你的 SVG 像 Phrogz 的老虎一样复杂，那很可能是不可能的......）
Also for most modern browsers, you can simply add preserveAspectRatio="none"attribute to the svgtag. If you have .svgfiles, you need to open the file with sublime text and add the code to the svg tag (something like <svg version="1.1"...(hundreds of lines of codes followed)and you will make it <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).
同样对于大多数现代浏览器，您可以简单地preserveAspectRatio="none"向svg标签添加属性。如果您有.svg文件，则需要使用 sublime 文本打开文件并将代码添加到 svg 标签（类似于<svg version="1.1"...(hundreds of lines of codes followed)并且您将使其成为<svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).
回答by kevinius
I just figured it out. On your <svg>tag you need to:
我只是想通了。在您的<svg>标签上，您需要：
- remove the
widthandheightproperties ex:width="375" height="137" - add this property
preserveAspectRatio="none" - add the viewbox property (containing your original width and height that you just removed
viewBox="0 0 375 137"
- 删除
width和height属性，例如：width="375" height="137" - 添加此属性
preserveAspectRatio="none" - 添加 viewbox 属性（包含您刚刚删除的原始宽度和高度
viewBox="0 0 375 137"
In your css file on the element that contains your svg background:
在包含 svg 背景的元素上的 css 文件中：
- add the property:
background-size: 100% 100%;
- 添加属性：
background-size: 100% 100%;
The key issue for me was that my svg file didn't contain the viewbox property.
对我来说，关键问题是我的 svg 文件不包含 viewbox 属性。
回答by Phrogz
You want the CSS3 background-sizeproperty:
你想要 CSS3background-size属性：
div {
height:200px;
background:url(my.svg);
background-size: 100% auto; /* Fill width, retain proportions */
}
Demo: http://jsfiddle.net/JknDr/1/??
演示：http: //jsfiddle.net/JknDr/1/??
If you want it to scale non-proportionally to fill the container (so the background stretches and squashes) then use background-size: 100% 100%.
如果您希望它不按比例缩放以填充容器（因此背景会拉伸和挤压），请使用background-size: 100% 100%.
