viewBox 是 SVG 自适应的核心，其四个参数“min-x min-y width height”定义内部坐标系取景框；min-x/min-y 平移原点，width/height 控制缩放比；错误设置会导致图形消失或过小，需匹配图形实际坐标范围。
viewBox 是 SVG 能自适应、能缩放、能裁剪、能居中显示的核心控制点，没它，SVG 很大概率会“消失”或“撑爆容器”。
viewBox 四个参数怎么填才不翻车
它不是装饰属性，而是定义了 SVG 内部坐标系统的“取景框”：viewBox="min-x min-y width height"。这四个数共同决定你画的图形在视口中如何映射、缩放、偏移。
-
min-x和min-y不是“移动图形”，而是把坐标系原点从默认的 (0, 0) 挪到画布上任意位置；设成负值（比如-50）就能让图形向左/上“露出更多” -
width和height控制缩放比例：视口尺寸 ÷ viewBox 尺寸 = 实际缩放比；比如width="200"的 SVG 配viewBox="0 0 100 100"，内容会被放大 2 倍填满 - 常见错误：直接抄别人代码却没改 viewBox 尺寸，导致自己画的 20×20 图标在 400×400 容器里小得看不见——因为 viewBox 还是
"0 0 20 20"，缩放比接近 1:1，没利用容器空间
为什么加了 viewBox 图形反而“不见了”
不是代码错了，是 viewBox 把图形框到视野外了。SVG 画布无限大，但 viewBox 只截其中一块；如果图形画在 (100, 100)，而 viewBox 是 "0 0 50 50"，那它就完全在取景框之外。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 快速排查：把 viewBox 的
width和height放大 10 倍再试（比如从"0 0 10 10"改成"0 0 100 100"），看图形是否突然出现 - 更稳妥做法：用开发者工具选中
<svg>元素，在 Elements 面板里临时删掉 viewBox 属性，观察图形原始位置和大小，再反推需要的 viewBox 范围 - 注意单位混淆：SVG 内部无像素概念，所有坐标都是抽象单位；
width="100"的矩形在viewBox="0 0 200 200"下实际渲染尺寸是视口的一半，不是 100px
preserveAspectRatio 怎么配合 viewBox 控制对齐和裁剪
viewBox 只管“取哪块”，preserveAspectRatio 才决定“怎么塞进视口”。默认值 "xMidYMid meet" 是最常用的安全选项，但它不是唯一解。
立即学习“前端免费学习笔记（深入）”；
- 想让图形完整可见且居中（默认行为）：保持
preserveAspectRatio="xMidYMid meet" - 想强制拉伸填满、允许变形：用
"none"—— 此时 viewBox 的宽高比和视口不一致会导致图形压扁或拉长 - 想裁剪掉边缘、确保铺满且不变形：用
"xMidYMid slice"，适合 banner 图、头像等强调视觉填充的场景 - 关键细节：只有当 viewBox 宽高比 ≠ 视口宽高比时，preserveAspectRatio 才真正起作用；否则它基本不干预
最容易被忽略的是 viewBox 和内部元素坐标的耦合关系：一旦你改了 min-x 或 min-y，所有 x/y 属性值都要跟着重算——这不是 CSS transform，没有局部偏移，是整个坐标系平移。调试时建议先固定 min-x="0" min-y="0"，调好缩放再动原点。
