无法拉伸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>

Answer 1

你应该添加

<svg preserveAspectRatio="none">

到您的SVG。

MDN Reference Link

  

<none>

     

不要强制统一缩放。必要时非均匀地缩放给定元素的图形内容，以使元素的边界框与视口矩形完全匹配。

Answer 2

对于像我这样需要听的人...因为我还没喝完咖啡...

确保preserveAspectRatio="none"位于顶级svg元素上（而不是直接位于path或shape上）。

/ facepalm