css - 无法拉伸(stretch) svg 背景图像，纵横比将被保留

Question

我使用 svg 作为背景图像，我希望它被拉伸(stretch)到 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 拉伸(stretch)？

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>

Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.