SVG中带单位font-size相对viewBox的计算算法咨询

• 核心坐标系说明：

  • 视口（Viewport）：SVG在页面上实际占据的像素尺寸（未显式设置width/height时，浏览器默认给300px宽、150px高）。
  • 用户坐标系：由viewBox定义的虚拟坐标空间，viewBox="x y w h"表示这个空间的宽为w单位、高为h单位，会自动缩放填满整个视口。

• 带单位font-size（如px）的计算流程：

  1. 单位转换：SVG中带绝对单位（如px）的长度，默认按1 CSS px = 1 用户单位的比例转换为用户单位。
  2. 视口映射：用户单位会被缩放为视口像素，缩放因子由viewBox和视口的尺寸关系决定：
     • 水平缩放因子 = 视口宽度 / viewBox宽度
     • 垂直缩放因子 = 视口高度 / viewBox高度
     • 若viewBox与视口宽高比一致，两个缩放因子相等，整体为等比例缩放。
  3. 最终显示尺寸：字体的实际视口像素大小 = 转换后的用户单位值 × 缩放因子。

• 对应你的场景解析：

  • 无viewBox时：用户单位直接等同于视口像素，font-size=0.05px就是0.05视口像素，尺寸过小无法显示。
  • 有viewBox="0 0 5.0 5.0"时：假设视口宽度为300px（浏览器默认），水平缩放因子=300/5=60。0.05px转换为0.05用户单位，最终显示尺寸=0.05×60=3px，这个大小的字体正常可见。

• 补充细节：

  • 若viewBox与视口宽高比不一致，浏览器会按preserveAspectRatio默认规则（xMidYMid meet）适配，取能让viewBox完全放入视口的最大缩放因子，保证内容不变形。
  • 若font-size用无单位值，SVG会直接将其视为用户单位，参与后续视口映射计算。

内容的提问来源于stack exchange，提问作者Hervé Girod