拉伸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中，图片不会被拉伸，它将保持其纵横比并居中显示。

- Toskan

---

你能做到吗，Robert？？在规格说明书中有提到吗？我很想阅读详细信息。 - Michael Mullany

@MichaelMullany，我的回答包含了规范部分的链接。 - Robert Longson

Answer 1

如果您需要覆盖显示的SVG的preserveAspectRatio，可以使用SVG片段标识符来实现，例如：

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

- Robert Longson

---

在 MacOS 上使用 Chrome 很好地工作，但由于某种原因，在 Windows 上无法工作（SVG 根本没有显示出来）。 - knabar

我必须纠正自己 - 它在Windows上的Chrome中也可以正常工作，我弄错了其他不相关的东西... - knabar

Answer 2

我不相信你可以像处理PNG图片一样扭曲SVG图片。

不过，如果你主要支持现代浏览器，你可以在SVG标签中添加preserveAspectRatio="none"属性。

例如：

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

- Frying Pan