拉伸 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%;
}

它不会被拉伸，它会保持它的宽高比并且只是居中。

至少在Chrome52

Answer 1

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

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

例如：

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

Answer 2

如果您需要覆盖您正在显示的 SVG 的 preserveAspectRatio，您可以使用 SVG fragment identifier 来做到这一点，例如

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

拉伸 SVG 背景图像？

Stretch SVG background image?

css

svg

background-image