viewbox定义坐标系而非尺寸，其四参数min-x、min-y、width、height指定从虚拟画布截取区域并等比缩放填满svg容器。
viewBox 不是尺寸，是坐标系定义；路径数据 d 的单位完全由 viewBox 坐标空间决定，不是像素。 两者配合不当，图形就会缩放错乱、位置偏移、文字糊成一片——问题几乎都出在比例和对齐上，而不是代码写错了。
viewBox 四个参数到底在控制什么
viewBox="min-x min-y width height" 不是“设置 SVG 大小”，而是声明：从虚拟画布的 (min-x, min-y) 点开始，截取一块宽 width、高 height 的区域，再把这个区域的内容等比拉伸/压缩，填满当前 svg 元素的 width 和 height（或 CSS 设置的尺寸）。
常见误判：
- 以为
viewBox="0 0 100 100"就是“画 100×100 像素的图”——其实它只是定义了内部坐标的范围，<rect x="50" y="50" width="10" height="10"> 在这个坐标系里就是“从 (50,50) 开始画一个 10 单位宽高的矩形”，最终显示多大，取决于容器宽高与 viewBox 宽高的比值</rect> - 改了
width和height却没调viewBox，结果图形忽大忽小、居中失效——因为缩放比例变了，但取景框没动 - 把
min-x或min-y设成负数（如"-10 -10 120 120"），其实是给内容留出“外边距”，方便描边或阴影不被裁掉，不是 bug
为什么 path 的 d 值看起来“不按常理缩放”
<path d="M10 10 L90 10"></path> 这条线在 viewBox="0 0 100 100" 下，是从左上角往右画一条 80 单位长的横线；但如果 viewBox 变成 "0 0 200 200"，同样的 d 值就只占一半长度——因为坐标单位被“稀释”了。
关键点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
d中所有数字都是用户坐标单位，和 viewBox 的width/height直接挂钩，和屏幕像素无关 - 路径描边粗细（
stroke-width）默认也按用户坐标计算；设stroke-width="1"在viewBox="0 0 100 100"下可能细得看不见，在"0 0 10 10"下却粗得盖住整个图形 - 想让描边始终是 1px 物理像素？加
vector-effect="non-scaling-stroke"，但注意兼容性（IE 不支持）
preserveAspectRatio 被忽略时最常踩的坑
即使 viewBox 和容器宽高比一致，preserveAspectRatio 缺失或设错，也会导致图标靠左、顶部留白、或内容被意外裁剪。
必须显式设，不能依赖默认：
- 要完整显示且居中（最常用）：
preserveAspectRatio="xMidYMid meet" - 要铺满容器、允许裁剪（如背景图）：
preserveAspectRatio="xMidYMid slice" - 绝对禁止：
preserveAspectRatio="none"——除非你真想让圆形变椭圆 - 错误写法：
preserveAspectRatio="xMinYMin"配viewBox="0 0 100 100"，会导致内容紧贴左上角，右边/下边大片空白
响应式 SVG 怎么写才稳
纯 HTML/CSS 实现等比缩放，不靠 JS，核心就两条：让容器宽高比 = viewBox 宽高比，并用 preserveAspectRatio 锁定行为。
可靠写法：
- 父容器不限宽高，SVG 自适应：
<svg viewbox="0 0 100 50" width="100%" height="auto"></svg>——浏览器自动按 viewBox 比例算 height - 父容器需固定宽高比（如卡片内图标）：
<div style="aspect-ratio: 2 / 1"><svg viewbox="0 0 100 50" width="100%" height="100%"></svg></div> - 禁用 height="100%" 单独使用：若父容器没设高度或 aspect-ratio，
height="100%"会坍缩为 0 - 避免
<img src="icon.svg">用于需要动态控制的场景——它无法通过 HTML 属性修改viewBox或preserveAspectRatio
真正难的不是写对一次，而是在嵌套布局、flex/grid 容器、rem/em 字体缩放环境下，保持 viewBox 坐标系和视觉表现的一致性。这时候，min-x/min-y 的微调、vector-effect 的取舍、甚至把关键路径转成 <symbol></symbol> + <use></use>，都得看具体上下文。别指望一个 viewBox 值适配所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
