preserveAspectRatio 是 SVG 中控制 viewBox 内容映射到视口的属性，由对齐方式（如 xMinYMin、xMidYMid）、缩放行为（meet 或 slice）和可选的 none 组成；meet 等比缩放确保全部可见，slice 等比缩放确保填满视口，none 则强制非均匀拉伸变形。
preserveAspectRatio 是 SVG 中控制 viewBox 内容如何映射到视口（即 的 width/height 区域）的核心属性，它不改变图形本身，而是决定“怎么放进去、是否缩放、往哪对齐”。关键在于理解它由三部分组成：对齐方式（align）+ 缩放行为（meetOrSlice）+ 可选的禁用标识（none）。
对齐方式决定“锚点位置”
align 部分指定 viewBox 裁剪出的图像在视口中的定位基准点，常用值有：
- xMinYMin：左上角对齐（viewBox 左上角贴合视口左上角）
- xMidYMid：居中对齐（默认值，viewBox 中心与视口中心重合）
- xMaxYMax：右下角对齐（viewBox 右下角贴合视口右下角）
- 还有 xMinYMid、xMidYMax 等组合，分别控制水平和垂直方向的对齐基准
meet 和 slice 控制“是否完整显示”
第二部分决定缩放策略，只在 viewBox 与视口宽高比不一致时生效：
- meet（默认）：等比缩放，确保 viewBox 全部可见——可能留白（如宽屏容器里显示竖版图标）
- slice：等比缩放，确保填满整个视口——可能裁剪边缘（如手机竖屏里显示横版图表）
例如：preserveAspectRatio="xMinYMin slice" 表示左上角对齐 + 填满视口（超出部分被切掉）；"xMaxYMax meet" 表示右下角对齐 + 完整显示（右侧/底部可能有空白）。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
none 表示放弃比例约束
设为 none 时，SVG 会强制拉伸 viewBox 内容以完全填充视口，x/y 方向缩放因子独立计算，图形必然变形。适用于背景图平铺、特殊视觉效果等明确需要非均匀缩放的场景。
- 注意：
none是独立值，不能和 align 或 meet/slice 混用，写法就是preserveAspectRatio="none" - 若同时需保持描边宽度不变，可配合
vector-effect="non-scaling-stroke"
实际应用小技巧
多数响应式场景推荐显式设置，避免依赖默认行为导致意外留白或错位：
- 图标类 SVG（要求清晰居中）：保留默认
preserveAspectRatio="xMidYMid meet" - 全屏数据图表（允许裁剪）：用
"xMidYMid slice"防止白边影响布局 - 固定左上角的装饰元素：用
"xMinYMin meet"确保内容从容器左上开始呈现 - 嵌入 CSS Flex/Grid 容器时，建议给
加display: block防止行内基线对齐干扰
