CSS：仅在一个方向上缩放背景 SVG

Posted 2023-03-06

【中文标题】CSS：仅在一个方向上缩放背景 SVG

【英文标题】：CSS: scale background SVG in only one direction

【发布时间】：2019-01-24 13:40:00

【问题描述】：

我有一个来自 inkscape 的漂亮背景 SVG 图像，它标志着从一个文本部分到下一个文本部分的过渡。我希望该背景图像放大或缩小到文本部分的整个宽度。出于响应性的原因，该大小取决于浏览器的宽度。但是，我希望该背景图像具有 20 像素的固定高度。

什么不起作用：

background-size: cover; 这对我不起作用，因为它会在右侧切断图像而不是缩小它，好吧。 background-size: contain 这对我不起作用，因为它总是会同时在 x 和 y 方向上缩小图像。结果，图像始终保持其原始 x-y 比率，好吧。 结合cover和contain 由于语法原因，这是不可能的，好吧。 background-size: 100% 20px; 或background-size: auto 20px 那是行不通的，即使我本以为会这样。我用PNG试了一下，效果很好。但是对于 SVG，宽度会被正确调整，然后高度也会被调整，以使图像保持其原始比例，这是我不希望的。但是，我希望使用 SVG，因为它是一个相对简单的图像，并且我希望它在所有设备上都具有最佳分辨率，包括真正的大屏幕，而不使用巨大的 PNG 图像。 由于问题似乎是 SVG 特有的，我在文本编辑器中打开了 SVG，并将属性和值 preserveAspectRatio="none" 插入到标签中。由于它仍然不起作用，我还尝试删除 SVG 标记中的宽度和高度以及 viewBox 规范。没有成功。

【问题讨论】：

svg 将始终尝试保持比例...您可以分享 SVG 并向我们展示预期的结果吗？

你在 svg 中有 viewBox 属性吗？

请更新您的问题minimal reproducible example

【参考方案1】：

于是我试了一下，发现了一种可能：

在 Inkscape 或文本编辑器中，根据图像的大小设置以下 viewBox - 所以如果你的图像是 100*20 像素，请像这样设置：viewBox="0 0 100 20" 在文本编辑器中，将 preserveAspectRatio="none" 添加到 SVG 标记 另外，在 SVG 标签中以百分比设置高度和宽度：width="100%" height="100%" 在 CSS 标记中，然后只需使用 background-size: 100% 20px;

通过这些步骤，可以使用 CSS 缩放背景 SVG，就像缩放任何位图图像一样。

【讨论】：

你得到了答案。您需要 svg 上的 viewBox 属性才能正确缩放。默认。将其设置为特定大小。考虑一个默认大小，然后你可以使用它。

您不需要第 1 步。只需为您现有的 SVG 设置适当的 viewBox。

【参考方案2】：

SVG 矢量的渲染方式与静态图像不同。它们在浏览器上被实时跟踪。这就是它们非常适合 Web 使用的原因，因为它们可以在不损失质量的情况下扩大规模。由于这个 css 无法以扭曲它的方式改变渲染。如果使用 svg 是一项严格的要求，并且假设您期望动态宽度，那么您可以将其拆分为多个部分并水平分布，如果您的宽度是静态的，则可以为您提供您正在寻找的效果，然后只需在任何在线 svg 编辑器或 Illustrator 上编辑它.

仅供参考，这可能是一个重复的问题： How does one make a SVG background that stretches rather than tiles?

【讨论】：

实际上，可以简单地在文本编辑器中编辑它以“解锁”比率，我在自己的回答中指出了这一点。

是的。但是您不再使用 CSS 来执行此操作。

是的，在 CSS 中似乎没有可能。正如您所建议的那样，在 CSS 中重复图像可能适用于可重复的图像，并且可能是它们的一个很好的修复方法。