如何使SVG背景延伸而不是平铺? [英] How does one make a SVG background that stretches rather than tiles?

问题描述

我有想要使用的SVG背景，但我想不出如何使它延伸到整个页面上，更不用说是背景了.有人可以帮忙吗?

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还是背景的W3Schools页面，我什么都没有得到.)

(The W3Schools pages, on both SVG nor on backgrounds, gave me nothing).

<object data="background.svg" type="image/svg+xml" width="100%" height="100%">不能完全正常工作.

推荐答案

我想您是在问是否可以使SVG像PNG那样变形和拉伸.不幸的是，除非您的SVG代码本身是通过这种方式设置的(例如，如果您的SVG是由Illustrator生成的，他们根本不会这么做)，这不是不可能的.

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.例如，您可以告诉SVG将左上角连接到右下角，而不是绘制具有设定角度的对角线.如果您有SVG，我也许可以告诉您如何手工编码. (如果您的SVG像Phrogz的老虎一样复杂，则不可能...)

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...)

对于大多数现代浏览器而言，您也可以简单地将preserveAspectRatio="none"属性添加到svg标记中.如果您有.svg个文件，则需要打开带有高级文字的文件，并将代码添加到svg标记中(类似于<svg version="1.1"...(hundreds of lines of codes followed)之类，然后将其设置为<svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).

Also for most modern browsers, you can simply add preserveAspectRatio="none" attribute to the svg tag. If you have .svg files, 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).

这篇关于如何使SVG背景延伸而不是平铺?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！