viewBox是SVG实现自适应缩放的核心属性，格式为viewBox="min-x min-y width height"，设置后SVG进入响应式模式，宽高仅控制容器尺寸，图形自动等比缩放；推荐用法是设viewBox并配合width:100%;height:auto;及preserveAspectRatio="xMidYMid meet"。
在 H5 页面中使用 SVG 时，viewBox 是实现图形完美自适应缩放的核心属性。它不依赖 JavaScript，纯 CSS + SVG 即可让图形在不同屏幕、容器尺寸下保持比例、清晰显示，且不会拉伸变形。
viewBox 的作用和基本写法
viewBox 定义了 SVG 内部坐标系统的“可视区域”——即“画布的哪一块内容要被显示”，格式为 viewBox="min-x min-y width height"。其中 width 和 height 是逻辑尺寸（如 "0 0 100 100"），不是像素值。
关键点：
- 只要设置了 viewBox，SVG 就会进入“响应式模式”；
- 此时 width 和 height 属性（或 CSS 的宽高）只控制容器大小，图形自动按比例缩放填充；
- 不设 viewBox，SVG 就是固定尺寸，无法真正自适应。
让 SVG 完全填满父容器（推荐用法）
这是最常见也最实用的自适应方式：SVG 随父元素宽高变化，同时保持原始比例。
- HTML 中去掉
width/height属性，或设为100%； - CSS 中给 SVG 设置
display: block; width: 100%; height: auto;（或height: 100%，视布局需要）； - 必须设置 viewBox，例如
viewBox="0 0 200 100"，对应你设计稿的原始宽高比； - 可选：加
preserveAspectRatio="xMidYMid meet"（默认值），确保图形居中、不裁剪、不拉伸。
示例：
适配不同宽高比场景（如全屏图标、卡片内嵌）
当父容器宽高比与 viewBox 不一致时，preserveAspectRatio 决定如何处理：
-
meet（默认）：等比缩放，完整显示全部内容，可能有留白； -
slice：等比缩放并填满，超出部分被裁剪； -
none：强制拉伸，破坏原始比例（一般避免）； - 还可加对齐标识，如
xMinYMax控制锚点位置（适合底部对齐的图标）。
例如做全屏背景图 SVG，希望铺满无白边又不失真，可写：preserveAspectRatio="xMidYMid slice"
配合 CSS 实现更灵活的响应行为
viewBox 本身不响应媒体查询，但可以和 CSS 联动：
- 用
max-width/max-height限制 SVG 最大尺寸； - 用
aspect-ratio: 2 / 1（现代浏览器）锁定容器宽高比，再配合width: 100%+viewBox，实现精准比例缩放； - 媒体查询中修改 SVG 的
font-size（如果用了 em 单位）或通过transform: scale()微调，但慎用，易影响点击区域。
注意：不要在 SVG 内联样式或 CSS 中给 设 transform 后再依赖 viewBox 缩放，逻辑容易冲突。
