本文介绍如何通过设置 preserveAspectRatio 属性，使 SVG 在浏览器窗口高度变小时仅沿垂直方向“挤压”（squish），而保持水平方向的等比缩放行为，从而实现更可控的响应式布局效果。
本文介绍如何通过设置 `preserveaspectratio` 属性，使 svg 在浏览器窗口高度变小时仅沿垂直方向“挤压”（squish），而保持水平方向的等比缩放行为，从而实现更可控的响应式布局效果。
在默认情况下，SVG 元素在容器尺寸受限时会依据 viewBox 和 width/height 的比例进行
等比缩放
（uniform scaling），以确保内容完整可见且不失真。但有时设计需求恰恰相反：当视口宽度减小，我们希望 SVG 水平方向仍保持比例缩放（如适配移动端窄屏）；而当视口高度不足时，则允许 SVG
垂直方向被压缩拉伸
（即非等比变形），避免内容被裁切或留出大量空白。
这一行为的关键控制参数是 SVG 的 preserveAspectRatio 属性。其语法为：
其中：
定义 viewBox 在 viewport 中的对齐方式（如 xMinYMid 表示左对齐、垂直居中）；
决定缩放策略：meet（默认）保证全部 viewBox 可见（等比缩放，可能留白）；slice 则强制填满 viewport（等比缩放后裁切超出部分）。
但仅用 slice 仍为等比缩放——要实现「水平保持比例、垂直允许挤压」，需配合特定对齐值与 slice 组合。此时 preserveAspectRatio="xMinYMid slice" 正是理想解法：
✅ xMinYMid：将 viewBox 的左侧与 viewport 左侧对齐，垂直方向居中；
✅ slice：强制 viewBox
完全覆盖
viewport 尺寸，当宽高比不匹配时，浏览器将
优先保持水平方向缩放比例不变，垂直方向拉伸或压缩以填满
——这正是“垂直 squish”的视觉效果。
修改原代码，只需在
preserveAspectRatio=" []"