SVG preserveAspectRatio 怎样让图形等比填满容器

SVG 图形要在不同尺寸的容器里保持比例，先把坐标系写进 viewBox，再用 preserveAspectRatio 决定“完整显示”还是“铺满裁切”。通常用 preserveAspectRatio="xMidYMid meet" 保留整个图形；如果容器必须无空白地铺满，改成 xMidYMid slice，但要接受边缘可能被裁掉。none 会允许横纵方向使用不同缩放比例，适合背景拉伸，不适合要求图形不变形的图标。官方地址：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAspectRatio。

先判断留白、裁切还是变形

值班时先看现象，不要一看到“没有铺满”就把属性改成 none。容器比 viewBox 更宽或更高时，等比缩放必然存在取舍：要么保留整幅图并留下空白，要么覆盖整个容器并裁掉一部分内容。

因此可以先按这三个信号分流：

先把 viewBox 与 viewport 对齐

preserveAspectRatio 不是用来替代尺寸定义的。viewBox="0 0 400 200" 描述内部坐标范围，width 和 height 或 CSS 盒子描述外部 viewport。只有两者都有明确含义，浏览器才有“把一块坐标区域放进另一块矩形”的问题可以处理。

这段写法适合图标、插图和需要完整呈现的统计图。viewBox 没有设置，或者内部图形坐标落在它之外，排查方向就不应只盯着 preserveAspectRatio。

用 meet、slice 或 none 控制填充

属性值的第一个词是对齐方式，第二个词是缩放策略。默认对齐是 xMidYMid，默认策略是 meet，所以省略属性时常常看到“完整但不铺满”的结果。

如果标题中的“填满”指的是“容器没有空白”，优先从 slice 开始；如果指的是“内容完整并尽量放大”，应使用 meet。两者都保持宽高比，区别只是超出部分在 viewport 外还是 viewport 内。

处理对齐、溢出与回退

xMidYMid 适合主体在中心的图形，但人物、地图标注或带重点文字的插图通常需要把裁切风险移到不重要的一侧。例如 xMinYMid slice 把左侧对齐并让右侧承担更多裁切，xMaxYMin meet 则把完整内容贴到右上角。

回退时不要把 meet、slice 和 CSS 的 object-fit 混成同一层规则。内联 SVG 先看 preserveAspectRatio；通过 引用 SVG 时，再确认外层图片盒子的宽高和溢出策略。若裁切掉了关键内容，先回到 meet，再重新设计 viewBox 的留白，而不是直接把图形拉伸。

发布前确认边界，避免上线后才发现内容被切掉

在交付前至少记录三项：容器的宽高比范围、是否允许裁切、图形的安全区域。用 slice 时把标题、数字和标注放在中心安全区；用 meet 时确认留白颜色不会与页面背景冲突；用 none 时确认该元素是背景或纹理，而不是圆形、人物和带比例含义的图表。

如果设计稿只给了一个固定尺寸，响应式页面仍要补一次极端宽高比判断。最小宽容器通常会暴露 slice 的横向裁切，极高容器则可能暴露顶部或底部裁切。把这两个边界写入组件说明，后续换容器时就能快速判断是改对齐值、改 viewBox，还是接受留白。

常见问题

为什么设置 preserveAspectRatio 后图形还是没有铺满？

先确认使用的是 slice 而不是默认的 meet，再确认 SVG 有 viewBox。没有 viewBox 时，这个属性对大多数 SVG 缩放不起决定作用。

slice 会不会把图形拉变形？

不会。slice 仍然保持宽高比，代价是部分 viewBox 可能超出 viewport。真正允许非等比缩放的是 none。

meet 和 slice 可以和 xMin、xMid、xMax 一起写吗？

可以。前一部分选择水平和垂直对齐，后一部分选择完整显示还是覆盖容器，例如 xMaxYMin meet 与 xMidYMid slice。