旋转（矩阵变换）矩形的SVG宽度分析：宽高数值缩放问题

嘿，我刚好碰到过类似的问题！最近在分析一份CorelDraw导出的SVG，里面有两个40×40的矩形——一个是普通的黑色轴对齐矩形，另一个是旋转了10度的红色矩形。打开SVG代码后能看到这两个元素，但奇怪的是旋转后的红色矩形的宽高数值不是原本的40×40，而是被缩放了。

先贴一下相关的SVG代码片段：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<!-- 省略中间其他内容 -->

为什么会出现这种情况？ #

这其实是CorelDraw处理旋转对象的默认逻辑：当你给矩形添加旋转变换时，CorelDraw并没有直接给SVG元素加上transform="rotate(10)"这样的属性，而是先计算出旋转后矩形的轴对齐外接边界框（AABB），然后用这个边界框的尺寸作为新的宽高，再配合变换属性来实现视觉上的旋转效果。

简单说，一个40×40的矩形旋转10度后，它的外接轴对齐矩形的宽和高会比原来大（比如宽会变成40 / cos(10°)左右，高同理），CorelDraw导出时就把这个外接框的尺寸写进了<rect>的width和height属性里，再通过变换让它看起来和你旋转后的矩形一致。这种处理方式是因为CorelDraw的内部渲染模型更偏向于用轴对齐的基础形状+变换来处理旋转对象，而非直接保留原始形状的旋转属性。

怎么解决这个问题？ #

如果你希望导出的SVG保留原始的40×40尺寸+明确的旋转变换，可以试试这几个方法：

• 转曲后导出：在CorelDraw里把旋转后的矩形转成曲线（快捷键Ctrl+Q），再导出SVG，部分版本会更贴近原始形状的定义；
• 调整导出设置：导出SVG时，在选项面板里找和“变换”相关的设置，选择“保留变换属性”而不是“将变换应用到形状”；
• 手动编辑SVG：导出后直接修改代码，把旋转矩形的width和height改回40，然后添加transform="rotate(10, cx, cy)"——这里的cx和cy是矩形的中心坐标，要确保旋转中心和原来一致，不然位置会跑偏。

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