拉伸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的preserveAspectRatio，可以使用SVG fragment identifier来执行此操作，例如

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

Answer 2

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

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

例如：

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