svg失真源于css宽高仅控制显示框而width/height属性定义绘图坐标系；正确做法是省略原生宽高、设置viewbox，并用css控制显示尺寸。
svg 标签不写 width 和 height 属性时，浏览器会用默认值 300×150 像素 —— 这不是“没设置”，而是硬编码的初始缓冲区尺寸。外部 CSS 可以控制显示大小，但**不能替代原生属性**，否则必然失真。
为什么只靠 CSS 设置 width/height 会导致 SVG 失真
SVG 的 width 和 height 属性决定的是**绘图坐标系的真实像素范围**；而 CSS 的 width/height 只控制元素在页面上的**显示框大小**。两者不一致时，浏览器会做等比拉伸（类似把一张 300×150 的画布强行撑到 600×400 显示），结果是：
- 圆变椭圆、斜线变粗、文字模糊
- 鼠标事件坐标映射错位（比如你点在视觉中心，实际触发的是左上角）
- 高 DPI 屏幕下锯齿更明显（原生像素不够，又没重采样）
正确做法：CSS 控制显示尺寸 + 保留 viewBox
要让 SVG 在外部 CSS 下响应式缩放且不失真，必须同时满足两个条件：
-
svg元素**必须有viewBox属性**（如viewBox="0 0 24 24"），它定义了内部坐标系的逻辑边界 - **不要设原生
width/height属性**（或设为100%，但不如留空+CSS 更可控） - 用 CSS 设置
width和height（或仅一个 +height: auto）
示例：
<svg viewbox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"></path></svg>
CSS：
.icon { width: 24px; height: 24px; }
此时 SVG 会按 viewBox 定义的比例缩放，保持矢量清晰度。
常见错误：用 transform: scale() 缩放 SVG
有人想“偷懒”直接加 transform: scale(2)，这会导致：
- 整个 SVG 元素（包括子元素）被 GPU 缩放，但坐标系未更新
- 如果 SVG 内部有 JS 绑定点击区域（比如用
getBoundingClientRect()计算位置），坐标会错乱 - 某些浏览器对
transform下的 SVG 渲染有兼容性问题（尤其旧版 Safari）
真正需要动态缩放时，应改用 width/height CSS 属性 + viewBox，而非 transform。
响应式场景下如何安全适配父容器
当 SVG 需要填满父容器（比如 width: 100%）时，关键不是“让它变大”，而是“让它按比例缩放”：
- 确保
svg有viewBox，且没有原生width/height - CSS 中设
width: 100%，height: auto（或固定高度，如height: 40px） - 如需强制拉伸（忽略宽高比），加
preserveAspectRatio="none"到svg标签里，但这是例外，不是默认做法
注意：preserveAspectRatio="none" 会让图形变形，仅适用于图标类简单图形，不适用于图表、地图等需比例准确的场景。
最容易被忽略的是：哪怕你写了 viewBox，只要同时写了原生 width="100" 这样的属性，浏览器就不再按 CSS 的 width 推导缩放比例 —— 它会先用那个固定像素值作为基准，再被 CSS 拉伸。所以“不写原生宽高”和“写好 viewBox”必须同时成立，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
