font-size 对 元素本身无效，因其是替换元素，尺寸由 width/height 或 css 显式控制；真正响应 font-size 的方式是用 em 单位容器包裹 svg 并设 viewbox。
直接给 <svg></svg> 元素设 font-size 没用——它只影响内部 <text></text>，不缩放路径。真正能随字体大小自动缩放的，是把 SVG 包进一个受 font-size 控制的容器，并让 SVG 自己用 em 单位撑满这个容器。
为什么 font-size 对纯 SVG 标签无效
浏览器把 <svg></svg> 当作替换元素（replaced element），它的尺寸默认由自身 width/height 属性或 CSS 显式设置决定。font-size 不参与其盒模型计算。你看到图标“变小了”，其实是父容器行高塌陷导致视觉错觉，SVG 本身尺寸纹丝不动。
- 常见错误现象：
<svg style="font-size: 24px"></svg>完全没反应 - 误以为和
<i class="bi bi-x"></i>一样——但那是字体图标，靠伪元素 + 字体文件渲染，机制完全不同 - 删掉
viewBox后加font-size更不会生效——viewBox是 SVG 响应式缩放的前提
正确做法：用 font-size 驱动 em 尺寸容器
核心思路是“借力”：让父容器定义 font-size，再用一个 1em × 1em 的包裹容器承载 SVG，最后让 SVG 100% 填满它。TDesign、Ant Design 图标组件底层正是这么做的。
- HTML 中确保
<svg></svg>只保留viewBox，删掉所有width、height、style属性（包括width="100%"） - CSS 写一层包裹类：
.icon { display: inline-flex; width: 1em; height: 1em; } -
<svg></svg>本身设为：width: 100%; height: 100%; vertical-align: middle; - 调用时只需控制父级或自身
font-size：<span style="font-size: 1.5rem"><svg class="icon">...</svg></span>
响应式缩放时容易踩的坑
你以为设个 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 - 如果父容器
font-size频繁变动（比如<h1></h1>里嵌图标），图标尺寸会跳变——这时改用rem或 CSS 变量更稳 - 不要在图标外层容器上设
transform: scale()：它不改变盒模型，点击热区、margin、布局流全乱套
最易被忽略的一点：SVG 的 viewBox 必须存在且比例正确。没有它，1em × 1em 容器缩放出来的只是拉伸变形，不是等比缩放。检查你复制的 SVG 源码，viewBox="0 0 24 24" 这类声明不能少，也不能写成 viewBox="0 0 100 100" 后再手动调宽高——那等于放弃 viewBox 的矢量优势。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
