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

Question

我从inkscape中获得了一张漂亮的背景SVG图像，该图像标记了从一个文本部分到下一个文本部分的过渡。我希望该背景图像放大或缩小到文本部分的整个宽度。出于响应的原因，该大小取决于浏览器的宽度。但是，我希望背景图片的高度固定为20px。

什么不起作用：

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

Answer 1

所以我尝试了一下，发现了一种可能性：

1. 在Inkscape或文本编辑器中，根据图像的大小设置以下viewBox –因此，如果您的图像为100 * 20px，则按如下设置：viewBox="0 0 100 20"
2. 在文本编辑器中，将preserveAspectRatio="none"添加到SVG标签
3. 此外，在SVG标签中，以百分比设置高度和宽度：width="100%" height="100%"
4. 在CSS标记中，然后只需使用background-size: 100% 20px;

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

Answer 2

SVG向量的呈现方式与静态图像不同。它们在浏览器中实时跟踪。这就是使它们非常适合Web使用的原因，因为它们可以缩放大小而不会损失质量。因此，css无法以会使扭曲的方式更改渲染。如果严格要求使用svg并假设您希望使用动态宽度，则可以将其拆分为多个部分，然后将它们水平分布，如果宽度是静态的，则可以得到所需的效果，然后在任何在线svg编辑器或Illustrator上进行编辑

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