如何制作可拉伸而非平铺的SVG背景？

Question

我有一个SVG背景图想要使用，但是我无法弄清如何将其拉伸到整个页面并作为背景。有人能帮忙吗？

(W3Schools的SVG和背景页面都没有给我任何帮助)。

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> 并不能完全解决问题。

- technillogue

---

你有现成的代码吗？ - BoltClock

Answer 1

我认为你想知道是否可以使SVG像PNG一样扭曲和拉伸。不幸的是，除非您的SVG代码本身就是这样设置的（例如，如果您的SVG是由Illustrator生成的），否则这是不可能的。

目前唯一的方法是手动编写SVG代码。例如，您可以告诉SVG将左上角连接到右下角，而不是以固定角度绘制对角线。如果您有SVG文件，我可能能够告诉您如何手动编写代码。（如果您的SVG像Phrogz的老虎那样复杂，可能不可能做到...）

此外，对于大多数现代浏览器，您只需向svg标记添加preserveAspectRatio="none"属性即可。如果您有.svg文件，您需要使用Sublime Text打开文件，并将代码添加到svg标记中（类似于<svg version="1.1"...（跟随数百行代码），然后将其更改为<svg version="1.1" preserveAspectRatio="none"...（跟随数百行代码））。

- Aero Wang

---

太棒了！这解决了我的问题，并直接回答了OP的问题。 - Kelley Curry

@Aero，你能提供任何参考资料来帮助描述你所说的“告诉SVG将左上角连接到右下角”的意思吗？ - David Cook

@DavidCook 他的意思是你可以在文档上从一个角落画一条线到另一个角落。 - user3638471

我同意@Paul Beck - 谢谢！真的。 - otinanai

如果您正在使用Inkscape并将其保存为“Plaing SVG”，则似乎会添加“preserveAspectRatio”参数（Inkscape SVG未被拉伸）。 - lepe

当你在搜索解决方案时，在SO上找到了它，而且你可能已经在几年前点赞了它。如果可以的话，我会再点赞一次。 ‍♂️ - squarecandy

Answer 2

我刚刚弄清楚了。在你的 <svg> 标签上，你需要：

• 删除 width 和 height 属性，例如：width="375" height="137"
• 添加属性 preserveAspectRatio="none"
• 添加视口属性 (包含你刚刚删除的原始宽度和高度)：viewBox="0 0 375 137"

在你的 CSS 文件中，对包含 SVG 背景的元素：

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

对我来说关键问题是我的 SVG 文件没有包含视口属性。

- kevinius

---

preserveAspectRatio="none"足够。 - Nagibaba

我不得不删除宽度和高度，否则它就无法工作。所以我必须添加 preserveAspectRatio="none" 并删除宽度和高度。 - herrfischer

谢谢，这是黄金。 - Fred K

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%。

- Phrogz

---

我认为OP想要的不是这样。他希望SVG能够像PNG一样扭曲和拉伸。 - Aero Wang

除非你使用Aero Windwalker的解决方案，否则SVG不会像其他图像类型那样超出其纵横比。否则，对于SVG而言，background-size: 100% 100%的行为类似于background-size: contain。 - Kelley Curry

我已经能够使用其他答案中的方法实现了。通过在文件的<svg>标签上应用preserveAspectRatio="none"，将其设置为背景图像，并将背景大小设置为100％，它会被拉伸。这不就像PNG图片一样被拉伸了吗？ - David Rhoderick

OP问“如何拉伸”，而你的回答是“如何避免拉伸”。这里有些不对劲:D - Robo Robok

我需要这个来处理一个背景图片SVG，它在Chrome、Edge和IE11中显示正常，但在Firefox中被平铺。谢谢。 - HartleySan

Answer 4

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

- Greg

---

xml:space是关于在文本节点中保留空格的。它与背景图像是否拉伸无关。关于preserveAspectRatio的最后一句话是正确的，但已经在其他答案中给出了。 - Robert Longson

我并不是完全理解为什么这样做有效。我只是想让其他人知道，在我改变了这个属性之前，我正在使用的SVG无法拉伸。所有其他回答都对OP无效，所以我发布了对我有用的答案。即使你已经给它投了反对票，我仍然希望它能帮助到某些人。 - Greg