Question

拉伸背景图片很容易：

.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

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

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

例如：

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

拉伸SVG背景图片？

2 个答案: