SVG 的 width/height 和 font-size 无效，因其尺寸由自身属性或 CSS 显式设置决定；font-size 不参与盒模型计算，需通过 viewBox + em 容器实现等比缩放。
为什么直接设 width/height 或 font-size 对 SVG 无效
浏览器把 当作替换元素，它的尺寸默认由自身 width、height 属性或 CSS 显式设置决定。font-size 不参与其盒模型计算——你看到图标“变小了”，大概率是父容器行高塌陷导致的视觉错觉， 实际尺寸纹丝不动。
常见错误现象：
-
完全没反应 - 删掉
viewBox后加font-size更不会生效——viewBox是 SVG 响应式缩放的前提 - 复制的 SVG 源码里漏了
viewBox="0 0 24 24"，结果等比缩放变成拉伸变形
必须保留 viewBox 并用 em 容器包裹 SVG
真正能随字体大小自动缩放的，是让父容器定义 font-size，再用一个 1em × 1em 的包裹容器承载 SVG，最后让 SVG 100% 填满它。
实操要点：
- HTML 中确保
只保留viewBox，删掉所有width、height、style（包括width="100%"） - CSS 写一层包裹类：
.icon { display: inline-flex; width: 1em; height: 1em; } -
自身设为：width: 100%; height: 100%; vertical-align: middle; - 调用时只需控制父级或自身
font-size：
用 background-image 加载 SVG 时别写死尺寸
如果用 CSS background-image 引入 SVG 文件，就完全绕开 HTML 标签限制，但必须避开两个致命坑：
- ❌
background-size: 24px 24px—— 强制拉伸会破坏矢量特性，等同于位图 - ✅ 推荐用
background-size: contain，它让 SVG 等比缩放并完整显示在容器内 - 必须配
background-repeat: no-repeat和background-position: center - 容器宽高建议用
em或rem单位，比如width: 2em; height: 2em;，这样整体才能随根字号响应变化
移动端高频踩坑点：clamp()、aspect-ratio 和 fixed 元素
你以为设个 font-size: clamp(1rem, 2vw, 1.5rem) 就万事大吉？实际中几个关键点常被忽略：
-
clamp()必须含rem才能响应根字号变化；写成clamp(16px, 2vw, 24px)和font-size完全无关 - Firefox 和 Safari 对
height: auto在 SVG 上解析不一致，务必配对写width和height，或显式加aspect-ratio: 1 / 1 - 如果外层有
position: fixed按钮，再给海报容器加transform: scale()，这个按钮在 iOS 上大概率“脱离视口定位”，因为transform会创建新 containing block
最易被忽略的一点：SVG 的 viewBox 必须存在且比例正确。没有它，1em × 1em 容器缩放出来的只是拉伸变形，不是等比缩放——检查你复制的 SVG 源码，viewBox="0 0 24 24" 这类声明不能少，也不能写成 vi。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
