无法拉伸SVG背景图片，纵横比将保持不变。

Question

我正在使用SVG作为背景图像，希望它被拉伸到100% 100%。

然而，Chrome和Firefox似乎都在尽力保留SVG的纵横比，并缩小其宽度。

原始大小

div
{
    background: url(image.svg) no-repeat;
    background-size: 100% 100%;
    width: 14rem;
    height: 4rem;
}

双倍宽度

div
{
    background: url(image.svg) no-repeat;
    background-size: 100% 100%;
    width: 28rem;
    height: 4rem;
}

双倍高度

div
{
    background: url(image.svg) no-repeat;
    background-size: 100% 100%;
    width: 14rem;
    height: 8rem;
}

如何将该 SVG 拉伸？

SVG 内容：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 371.7 102.8" enable-background="new 0 0 371.7 102.8" xml:space="preserve">
<polygon fill="#EF9104" points="370.4,100.5 0,100.5 0,0 269.4,0 "/>
</svg>

- Anders Lindén

---

删除 viewBox 对我有帮助。 - Aiphee

Answer 1

你应该添加

<svg preserveAspectRatio="none">

将其应用到您的SVG中。

MDN 参考链接

<none>

不强制等比例缩放。如有必要，对给定元素的图形内容进行非均匀缩放，使得该元素的边界框完全匹配视口矩形。

- Paulie_D

---

我正在处理一个伪元素，但是我无法拉伸SVG（也在背景图像中）。它可以裁剪它，但比例始终保持不变。 - Max

Answer 2

您可以使用SVG片段标识符，如果您不想编辑SVG文件本身以删除viewBox或添加preserveAspectRatio="none"。

例如：

div
{
    background: url(image.svg#svgView(preserveAspectRatio(none))) no-repeat;
    background-size: 100% 100%;
    width: 28rem;
    height: 4rem;
}

- Robert Longson

---

将 #svgView(preserveAspectRatio(none)) 添加到 background-size: 100% 100%; 的末尾就可以了！但是，如果使用 no-repeat，它根本不会加载。所以我把它移除了，现在完美了。对于任何查看此内容的人，如果您想控制高度，请使用 background-size: 100% HeightValueHere;。 - Tristan Isfeld

Answer 3

请注意，这是一个旧问题，但我在处理此问题时遇到了一些问题，所以希望发布一些进一步的信息，以帮助其他人......

<svg preserveAspectRatio="none"> 只有在提供了 viewBox 属性时才会生效，例如： <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 1152">

"preserveAspectRatio 属性仅适用于在同一元素上提供 viewBox 属性的元素。对于这些元素，如果未提供 viewBox 属性，则忽略 preserveAspectRatio 属性。" https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

希望这能帮助其他人！

- ceindeg

Answer 4

对于像我这样需要听到它的人，就像现在...因为我还没有喝完咖啡...

确保preserveAspectRatio="none"在您的顶级svg元素上（而不是直接放在path或shape上）。

/facepalm

- Chase