46

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

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

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

4

4 回答 4

116

我想你是在问你是否可以让 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).

于 2015-03-25T15:27:57.880 回答
58

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

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

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

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

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

于 2019-06-05T11:35:07.427 回答
12

你想要 CSS3background-size属性：

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

演示： http: //jsfiddle.net/JknDr/1/ ​​</h2>

如果您希望它不按比例缩放以填充容器（因此背景会拉伸和挤压），请使用background-size: 100% 100%.

于 2012-07-25T22:38:57.253 回答
1

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

于 2021-02-03T15:48:52.787 回答