拉伸SVG背景图像？

Posted 2023-03-06

【中文标题】拉伸SVG背景图像？

【英文标题】：Stretch SVG background image?

【发布时间】：2017-01-18 00:16:09

【问题描述】：

拉伸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 中

【问题讨论】：

罗伯特你能做到吗？规范中在哪里引用？很想阅读详细信息

@MichaelMullany 我的回答包含指向规范部分的链接

【参考方案1】：

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

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

例如：

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

【参考方案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%;

【讨论】：

在 MacOS 上的 Chrome 中运行良好，但由于某种原因它在 Windows 上无法运行（SVG 根本没有出现）

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