如何制作拉伸而不是平铺的 SVG 背景？

Posted 2023-03-06

【中文标题】如何制作拉伸而不是平铺的 SVG 背景？

【英文标题】：How does one make a SVG background that stretches rather than tiles?

【发布时间】：2012-07-24 09:11:30

【问题描述】：

我有一个想要使用的 SVG 背景，但我不知道如何让它覆盖整个页面，更不用说成为背景了。有人可以帮忙吗？

（无论是 SVG 还是背景上的 W3Schools 页面，都没有给我任何信息）。

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> 并不完全有效。

【问题讨论】：

你有现成的代码吗？

【参考方案1】：

我想你是在问你是否可以让 SVG 像 PNG 那样扭曲和拉伸。不幸的是，这并非不可能，除非您的 SVG 代码本身是这样设置的（例如，如果您的 SVG 是由 illustrator 生成的，他们根本不会这样做）。

目前唯一的方法是手动编写 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)。

【讨论】：

完美！这解决了我的问题，并直接解决了 OP 的问题。

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

@DavidCook 他只是意味着您可以在文档上从一个角到另一个角画一条线

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

如果您使用 Inkscape 并将其另存为“Plaing SVG”，它似乎添加了“preserveAspectRatio”参数（Inkscape SVG 没有拉伸）。

【参考方案2】：

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

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

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

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

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

【讨论】：

preserveAspectRatio="none" 就够了

我必须删除宽度和高度，否则它将无法正常工作。所以我必须添加preserveAspectRatio="none"并删除宽度和高度。

谢谢，这是黄金

【参考方案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%。

【讨论】：

我认为这不是 OP 所要求的。他希望 SVG 能够像 PNG 那样扭曲和拉伸。

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

好吧，我能够让它与其他答案一起使用。通过将preserveAspectRatio="none" 应用于文件中的<svg> 标签，将其设置为背景图像，并将背景大小设置为100%，它会拉伸。怎么不像 PNG 那样拉伸？

OP 询问“如何拉伸”，而您的回答是“如何避免拉伸”。这里有些不对劲：D

需要这个作为背景图像 SVG 我在 Chrome、Edge 和 IE11 中显示良好，但在 Firefox 中是平铺的。谢谢。

【参考方案4】：

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

【讨论】：

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

我不会假装完全理解它“为什么”起作用。我只是让其他人知道，在我更改此属性之前，我正在使用的 SVG 不会拉伸。 OP 的所有其他答案对我都不起作用，所以我发布了对我有用的答案。即使您投了反对票，我仍然希望它对某人有所帮助。