如何制作伸展而不是拼贴的SVG背景？

Question

我有一个我想要使用的SVG背景,我无法弄清楚如何让它延伸到整个页面,更不用说是一个背景.有人可以帮忙吗？

(关于SVG和背景的W3Schools页面都没有给我任何信息).

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

Answer 1

我想你是在问你是否可以让SVG像PNG那样扭曲和拉伸.遗憾的是,除非您的SVG代码本身设置得当(例如,如果您的SVG是由插图画家生成的,他们根本不会这样做),这是不可能的.

目前唯一的方法是手动编写SVG代码.例如,您可以告诉SVG连接左上角和右下角,而不是绘制具有设定角度的对角线.如果您有SVG,我可能会告诉您如何手动编码.(如果你的SVG像Phrogz的虎一样复杂,那很可能......)

此外,对于大多数现代浏览器,您只需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).

Answer 2

我只是想通了。在您的<svg>标签上，您需要：

• 删除width和height属性，例如：width="375" height="137"
• 添加此属性 preserveAspectRatio="none"
• 添加 viewbox 属性（包含您刚刚删除的原始宽度和高度 viewBox="0 0 375 137"

在包含 svg 背景的元素上的 css 文件中：

• 添加属性： background-size: 100% 100%;

对我来说，关键问题是我的 svg 文件不包含 viewbox 属性。

Answer 3

你想要CSS3 background-size属性:

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

演示:http://jsfiddle.net/JknDr/1/

如果您希望它按比例缩放以填充容器(因此背景拉伸和压扁)然后使用background-size: 100% 100%.