拉伸SVG背景图片? [英] Stretch SVG background image?

问题描述

很容易拉伸png背景图片:

It's easy to stretch a png background image:

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

尽管如此，但它不能在SVG背景下使用

this won't work with an SVG background though

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

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

it won't get stretched, it will maintain its aspect ratio and just center.

至少在Chrome 52中

At least in Chrome 52

推荐答案

如果您需要覆盖所显示的SVG的prepareAspectRatio，则可以使用

If you need to override the preserveAspectRatio of the SVG you are displaying you can use an SVG fragment identifier to do that e.g.

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

这篇关于拉伸SVG背景图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！