SVG 图形变形
对 SVG 做位移、旋转（可指定中心点）、缩放、斜切、翻转与矩阵变换，实时预览并输出 transform 属性、CSS 与变换后的 SVG 源码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
所有计算都在本地完成，参数会实时反映到矩阵、transform 属性与预览上。
自定义矩阵在其它变换之前先作用于图形，默认是单位矩阵。
（无变换）（无变换）matrix(1, 0, 0, 1, 0, 0)<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80"><rect x="20" y="20" width="80" height="40" rx="8" fill="#4F46E5"/><text x="60" y="46" font-family="sans-serif" font-size="16" text-anchor="middle" fill="#FFFFFF">UniKit</text></svg>
这个工具能做什么
- 给图标或图形加一点旋转、缩放、斜切，实时看效果，并拿到可以直接写进文件的 transform 值。
- 需要绕某个点旋转（例如绕图形中心而不是左上角）时填「中心点」，工具会生成带回移的正确矩阵。
- 对照学习 SVG 变换顺序：同一个 rotate + scale 组合，属性写法与合成矩阵会一起显示，能直观看到矩阵乘法是怎么作用的。
- 调试「为什么加了 transform 后图形跑出画布」：用内置示例图形逐项打开变换，定位是哪一步导致的偏移。
示例
输入
位移 X 20、Y 10，旋转 45°，中心点 (50, 50)，缩放 X 1.5，其余默认
输出
transform 属性：translate(20 10) translate(50 50) rotate(45) scale(1.5 1) translate(-50 -50) CSS：translate(20px, 10px) translate(50px, 50px) rotate(45deg) scale(1.5, 1) translate(-50px, -50px) 矩阵：matrix(1.06066, 1.06066, -0.707107, 0.707107, 52.32233, -28.388348)
变换按「外层 → 内层」排列：先位移，再移到中心点、旋转缩放，最后回移中心点。中心点通过前后两次 translate 实现，这是绕任意点变换的标准写法。
常见问题
为什么绕中心旋转要多出两次 translate？
SVG 的 rotate / scale 都是绕坐标原点进行的。想绕点 (50, 50) 旋转，就得先把原点平移到 (50, 50)，做完旋转缩放再平移回去，所以输出里会出现 translate(50 50) … translate(-50 -50) 这一对。矩阵合成后它们会合并成一个平移量。
矩阵里的数字是怎么来的？
把每一步变换写成一个 3×2 仿射矩阵，再按顺序相乘，得到 a b c d e f 六个值，含义是 x' = a·x + c·y + e、y' = b·x + d·y + f。工具保留 6 位小数，所以 cos 90° 那种 6.12e-17 的浮点噪声会被抹成 0。
transform 属性和 CSS transform 有什么区别？
语法不同：属性里参数用空格分隔且不带单位（rotate(45)），CSS 里用逗号分隔且带单位（rotate(45deg)）。另外 CSS 的 transform-origin 是独立属性，而这里把中心点直接编进了变换序列，所以两者不能混用同一份值。
自定义矩阵的作用位置在哪？
自定义矩阵紧贴图形，作用在其它变换之前（最内侧）。也就是说先按自定义矩阵变换图形本身，再做斜切、缩放、旋转和平移。它默认为单位矩阵，等价于不生效。
改完参数后怎么把变换写回 SVG？
输出的「变换后的 SVG」已经把 transform 写进根标签，并会覆盖原有的 transform 属性；变换全部归零时该属性会被移除。复制这段源码另存为 .svg 即可。
关键词：svgtransform变形旋转缩放斜切matrix矩阵旋转中心svg 编辑