SVG meet与slice怎样决定留白或裁切

SVG 放进一个与 viewBox 比例不同的容器时，留白还是裁切由 preserveAspectRatio 的第二个关键字决定：meet 保留完整图形，容器多出来的区域会留白；slice 让图形铺满容器，超出容器的部分会被裁掉。两者都保持宽高比，不会把图形拉伸变形。

下面用一个宽版 viewBox 放进较窄的 viewport，说明如何选择关键字、如何定位裁切边缘。参考地址：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAspectRatio

先比较 viewBox 与 viewport 的宽高比

viewBox="0 0 240 120" 的比例是 2:1。如果外层容器是 320×240，比例只有 4:3，两者就不一致。此时不要先改坐标或强行修改宽高，先决定内容优先级：图标、流程图需要完整显示时选 meet；封面、背景图需要填满卡片时选 slice。

meet 保留完整 viewBox，留白是正常结果

meet 会选择一个不超过 viewport 的统一缩放比例，让整个 viewBox 都落在容器内。宽版图形放进偏方的容器时，上下或左右会出现空带，这不是 SVG 绘制失败，而是为了不丢失内容。

这里的 xMidYMid 把 viewBox 的中心对齐到 viewport 中心。若希望图形贴顶，可改成 xMidYMin meet；贴底则使用 xMidYMax meet。优先检查的是内容是否完整，而不是把留白误判成尺寸错误。

slice 铺满 viewport，裁切位置由对齐点决定

slice 会取足以覆盖整个 viewport 的统一缩放比例，所以宽高比不一致时，viewBox 的一部分必然越过容器边界。做背景图时这通常是预期行为，但人物脸、按钮文字或图表刻度不能放在可能被裁掉的边缘。

如果重要内容在左侧，使用 xMinYMid slice，让 viewBox 的左边与 viewport 左边对齐，裁切更多地发生在右侧；右侧主体则可用 xMaxYMid slice。纵向同理，YMin、YMid、YMax 分别表示顶、中、底。

用对齐关键字控制结果位置

完整值的结构是 ，例如 xMinYMid slice。xMin、xMid、xMax 控制水平方向，YMin、YMid、YMax 控制垂直方向。默认值为 xMidYMid meet，省略属性时也会得到“完整显示并居中”的效果。

调试时按这张清单走：第一，确认 viewBox 的宽高不是 0，且确实表达了内容边界；第二，记录 viewport 的实际宽高比，不只看 CSS 里写的百分比；第三，完整内容优先就用 meet，铺满优先就用 slice；第四，主体靠边时把 xMidYMid 改成对应的 xMin、xMax 或 Y 方向锚点；第五，若看到变形，检查是否误用了 none。

常见问题

为什么写了 meet 仍然看到空白？

因为 meet 的目标就是让完整 viewBox 保持等比显示；当两个比例不同，不能同时铺满四条边，空白是保留内容的代价。若业务要求四边无空白，换成 slice 并重新安排安全区域。

slice 裁掉了主体，应该先改 viewBox 还是先改对齐？

主体位置只是问题的一部分，先确认 viewBox 是否包含了真正的内容边界；边界正确后，再用 xMin、xMid 或 xMax 调整锚点。若多个屏幕比例都要完整看到主体，则应为主体预留安全区，不能只依赖某一个对齐值。