viewbox的缩放比例由容器尺寸与viewbox宽高比共同决定：横向缩放比=容器宽度÷viewbox宽度，纵向同理，浏览器取较小值等比缩放；若二者宽高比不一致，则导致拉伸或留白。
viewBox 的四个数字怎么决定缩放比例
缩放比例不是由 viewBox 单独决定的，而是由 width/height（或 CSS 尺寸）与 viewBox 的宽高比共同计算出来的：缩放比 = 容器宽度 ÷ viewBox width（横向），同理算纵向。浏览器会取两者中较小值做等比缩放（默认 preserveAspectRatio="xMidYMid meet"）。
例如：<svg width="200" height="100" viewbox="0 0 100 50"></svg>，容器宽高比是 2:1，viewBox 宽高比也是 2:1 → 横向缩放比 = 200 ÷ 100 = 2，纵向 = 100 ÷ 50 = 2 → 等比放大 2 倍，无拉伸。
- 如果改成
viewBox="0 0 200 50"，宽高比变成 4:1，而容器仍是 2:1 → 横向缩放比 = 1，纵向 = 2 → 浏览器只能按 meet 规则留白或裁剪，图形被压扁 -
min-x和min-y为负值（如"-10 -5 100 50"）可“露出”坐标系外的内容，相当于平移视口原点，不改变缩放比 - 省略
width和height时，浏览器会按 viewBox 比例推算默认尺寸（如 300×150），此时缩放比为 1，但实际显示大小不可控
为什么加了 viewBox 图形反而变小/看不见了
最常见原因是 viewBox 范围远大于图形实际坐标范围。比如你画了一个 <circle cx="10" cy="10" r="5"></circle>，却设 viewBox="0 0 1000 1000" → 缩放比 ≈ 0.3（假设容器是 300×300），图形就缩成针尖大小。
- 检查图形所有元素的坐标和尺寸（
cx/cy/r、x/y/width/height），找出最大包围矩形 - 用这个矩形的左上角坐标作
min-x/min-y，宽高作width/height，例如图形分布在 x=20~80、y=10~60 →viewBox="20 10 60 50" - 别直接复制别人图标代码里的
viewBox="0 0 24 24"，除非你的图形真在 0–24 坐标内
如何让 SVG 响应式缩放且不模糊、不变形
关键不是“怎么缩”，而是“用对缩放锚点”：必须声明 viewBox，禁用 transform: scale()，并确保容器宽高比匹配。
- 写法一（推荐）：
<svg viewbox="0 0 100 50" width="100%" height="auto"></svg>——height="auto"让浏览器按 viewBox 比例自动算高，天然防变形 - 写法二（现代 CSS）：
<div style="aspect-ratio: 2 / 1"><svg viewbox="0 0 100 50" width="100%" height="100%"></svg></div> - 描边失真？给具体图形元素加
vector-effect="non-scaling-stroke"，不能写在<svg></svg>根上 - 文字糊？避免用固定
font-size="12"，改用相对单位如font-size="1em"，并确保父元素字体大小合理
引用外部 SVG（
用 <use></use> 引用 <symbol></symbol> 时，外层 <svg></svg> 必须显式声明 viewBox，否则 width="auto" 失效，浏览器 fallback 到默认 300px 宽度，导致比例崩坏。
-
<symbol id="icon" viewbox="0 0 40 20"></symbol>→ 外层<svg></svg>的viewBox必须完全一致：viewBox="0 0 40 20" - 没设
viewBox的<svg></svg>没有固有宽高比（intrinsic aspect ratio），width: auto就无法根据height: 1em推出正确宽度 - Base64 内联或
<img src="icon.svg">方式绕不开这个问题——只有内联<svg></svg>+ 正确viewBox才能真正可控
viewBox 不是“设置尺寸”的开关，而是定义坐标系的取景框；真正容易被忽略的是：它一旦写错，图形可能还在那儿，只是被缩到像素级看不见，或者被拉伸得面目全非——调试时先查 viewBox 范围是否包得住所有图形坐标，再看容器宽高比是否匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
