Question

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

（W3Schools页面，关于SVG和背景，都没有给我任何东西）。

<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

您需要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%。

Answer 3

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

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

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

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

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

Answer 4

我发现 Illustrator 正在向我的 SVG 添加 xml:space="preserve"，这会阻止背景图像拉伸以适应空间。我看到这已被弃用；但是，Illustrator 仍在添加它。一旦我将该属性更改为 xml:space="preserve" 并添加 preserveAspectRatio="none" 图像按预期缩放。

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

4 个答案:

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