拉伸SVG背景图片？

Question

拉伸png背景图像很容易：

.stretched-logo-bg {
    background: url("../img/curve.png") center center no-repeat;
    background-size: 100% 100%;
}

但是，这不适用于SVG背景

.stretched-logo-bg {
    background: url("../img/curve.svg") center center no-repeat;
    background-size: 100% 100%;
}

它不会被拉伸，它将保持其宽高比并保持居中。

至少在Chrome 52中

Answer 1

我不相信你可以让 SVG 像 PNG 那样扭曲。

但是，如果您主要支持现代浏览器，则可以preserveAspectRatio="none"向 SVG 标签添加属性。

例如：

<svg version="1.1" preserveAspectRatio="none" .. etc`

Answer 2

如果您需要覆盖显示的SVG的prepareAspectRatio，则可以使用SVG片段标识符执行此操作，例如

.stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
    background-size: 100% 100%;
}