CSS：仅在一个方向上缩放背景 SVG
CSS: scale background SVG in only one direction
我有一个来自 inkscape 的漂亮背景 SVG 图像，它标志着从一个文本部分到下一个文本部分的过渡。我希望该背景图像放大或缩小到文本部分的整个宽度。出于响应的原因，该大小取决于浏览器的宽度。但是，我希望背景图片的高度固定为 20px。
什么不起作用：
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 矢量的渲染方式与静态图像不同。它们在浏览器上实时跟踪。这就是它们非常适合网络使用的原因，因为它们可以在不降低质量的情况下扩展尺寸。因此 css 无法以扭曲它的方式改变渲染。如果使用 svg 是一个严格的要求并且假设您期望动态宽度那么您可以将它分成多个部分并让它们水平分布给您如果您的宽度是静态的那么您正在寻找的效果然后只需在任何在线 svg 编辑器或 Illustrator 上编辑它.
仅供参考，这可能是一个重复的问题：
How does one make a SVG background that stretches rather than tiles?
所以我试了一下，发现了一个可能性：
- 在 Inkscape 或文本编辑器中，根据您的图像大小设置以下 viewBox – 因此，如果您的图像是 100*20px，请这样设置：
viewBox="0 0 100 20"
- 在文本编辑器中，将
preserveAspectRatio="none" 添加到 SVG 标签
- 此外，在 SVG 标签中以百分比设置高度和宽度：
width="100%" height="100%"
- 在 CSS 标记中，然后只需使用
background-size: 100% 20px;
通过这些步骤，可以使用 CSS 以与缩放任何位图图像相同的方式缩放背景 SVG。
我有一个来自 inkscape 的漂亮背景 SVG 图像，它标志着从一个文本部分到下一个文本部分的过渡。我希望该背景图像放大或缩小到文本部分的整个宽度。出于响应的原因，该大小取决于浏览器的宽度。但是，我希望背景图片的高度固定为 20px。
什么不起作用：
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 矢量的渲染方式与静态图像不同。它们在浏览器上实时跟踪。这就是它们非常适合网络使用的原因，因为它们可以在不降低质量的情况下扩展尺寸。因此 css 无法以扭曲它的方式改变渲染。如果使用 svg 是一个严格的要求并且假设您期望动态宽度那么您可以将它分成多个部分并让它们水平分布给您如果您的宽度是静态的那么您正在寻找的效果然后只需在任何在线 svg 编辑器或 Illustrator 上编辑它.
仅供参考，这可能是一个重复的问题： How does one make a SVG background that stretches rather than tiles?
所以我试了一下，发现了一个可能性：
- 在 Inkscape 或文本编辑器中，根据您的图像大小设置以下 viewBox – 因此，如果您的图像是 100*20px，请这样设置：
viewBox="0 0 100 20" - 在文本编辑器中，将
preserveAspectRatio="none"添加到 SVG 标签 - 此外，在 SVG 标签中以百分比设置高度和宽度：
width="100%" height="100%" - 在 CSS 标记中，然后只需使用
background-size: 100% 20px;
通过这些步骤，可以使用 CSS 以与缩放任何位图图像相同的方式缩放背景 SVG。