当浏览器窗口高度小于 SVG 容器时，可通过设置 preserveAspectRatio="xMinYMid slice" 实现仅垂直方向“挤压”显示，保持水平比例不变，避免整体等比缩放导致图形变形。
当浏览器窗口高度小于 svg 容器时，可通过设置 `preserveaspectratio="xminymid slice"` 实现仅垂直方向“挤压”显示，保持水平比例不变，避免整体等比缩放导致图形变形。
在响应式 Web 开发中，SVG 的缩放行为常由 viewBox 和 width/height 属性共同决定。默认情况下，SVG 会维持宽高比（aspect ratio）进行等比缩放（即 preserveAspectRatio="xMidYMid meet"），这在宽度受限时效果良好，但在高度受限场景下（如窄屏手机竖屏浏览），可能导致内容被过度裁剪或留白过多。
要实现「宽度方向保持等比缩放，高度方向允许非等比压缩（squish）」，关键在于覆盖 SVG 的默认 preserveAspectRatio 行为。preserveAspectRatio 控制 SVG 内容如何适配其容器边界，其语法为：
preserveAspectRatio="[align] [meetOrSlice]"
其中：
- align 指定对齐方式（如 xMinYMid 表示左对齐、垂直居中）；
- meetOrSlice 决定缩放策略：meet（完整可见，可能留白），slice（填满容器，可能裁剪）。
✅ 正确解法：将 preserveAspectRatio 设为 "xMinYMid slice"
该值表示：
- 水平方向左对齐（xMin），确保左侧内容始终可见；
- 垂直方向居中（YMid），视觉更平衡；
- 使用 slice 模式强制 SVG 内容拉伸以完全填充容器，不维持原始宽高比——即实现“垂直方向压缩”，而水平方向因 viewBox 与容器宽度比例固定，实际表现为按需拉伸/压缩（无额外约束）。
修改后的 SVG 标签如下（仅添加属性）：
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-350 -250 700 500"
preserveAspectRatio="xMinYMid slice"
style="display: block; border: 5px solid black; position: absolute;
top: 5%; left: 5%; width: 90%; height: 90%; background: #fff;">
<!-- 内容保持不变 -->
<circle r="200" class="face" fill="red" />
<path fill="none" class="face" transform="translate(-396,-230)"
d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537c-41.421,0-76.961-25.185-92.142-61.076" />
<circle cx="-60" cy="-50" r="20" fill="#000" />
<circle cx="60" cy="-50" r="20" fill="#000" />
</svg>⚠️ 注意事项：
- slice 模式下，若容器高度远小于 viewBox 高度，SVG 内容会在 Y 轴方向被显著拉伸（即“squish”），此时需确认图形语义是否可接受形变（例如人脸 SVG 中眼睛/嘴巴比例失真）；
- 若需保留关键区域（如面部中心），可配合 viewBox 微调（如增大 Y 方向 padding）或使用 CSS transform: scale(1, scaleY) 动态控制，但原生 preserveAspectRatio 是最轻量、声明式的解决方案；
- 该属性对 <img> 引用的 SVG 或 CSS background-image 无效，仅作用于内联 <svg> 元素；
- 浏览器兼容性极佳（IE9+、所有现代浏览器均支持）。
总结：通过一行 preserveAspectRatio="xMinYMid slice"，即可精准控制 SVG 在高度受限时的渲染行为——放弃等比约束，实现可控的垂直压缩，兼顾布局完整性与开发简洁性。这是 SVG 响应式设计中被低估却极为实用的核心技巧。
