SVG文字缩放异常咨询：为何缩放参数与矩形不一致？

一、为什么文字高度翻倍要用y轴√2、x轴1/√2的缩放组合？ #

这和tspan没关系，关键在于SVG文字和矩形的渲染逻辑完全不同：

• 矩形是纯几何图形，单轴缩放（比如scaleY(2)）只会改变对应轴的尺寸，另一轴不受影响，所以y轴200%缩放直接让高度翻倍，宽度保持原样。
• 但SVG的<text>是排版类元素，字形基于EM框设计。如果直接给<text>加scaleY(2)，这是仿射变换，会同时拉伸文字的垂直高度和水平宽度——文字会变“胖”，完全不是你想要的“只拉高不增宽”的效果。
• 而scaleY(√2)搭配scaleX(1/√2)的组合，目的是保证文字水平宽度不变的同时，让垂直高度视觉上翻倍：
  • 垂直方向缩放因子的平方是2，视觉上高度就是原来的2倍；
  • 水平方向用垂直缩放的倒数，刚好抵消垂直缩放带来的水平拉伸，让文字的宽高比例保持正常，不会变形。

二、为什么左对齐的文字x坐标也会被缩放？ #

这是SVG坐标系变换的基本规则：

• SVG的变换（包括scale）是先作用于元素的局部坐标系，再在这个变换后的坐标系里绘制元素。
• <text>的x属性是在它自己的局部坐标系里定义的位置，当你加了缩放变换，局部坐标系的刻度会被缩放。比如你设x="10"，再用scaleX(1/√2)，实际画布上的x位置就是10 * 1/√2，看起来像是x坐标被缩放了，但本质是坐标系变了，原坐标值映射到画布的位置跟着变了。
• 左对齐只是文字在自身局部坐标系内的对齐方式，坐标系被缩放后，整体位置自然会跟着变换，和对齐方式没关系。

内容的提问来源于stack exchange，提问作者simone