如何计算SVG平移参数，使缩放旋转矩形与GDI+效果一致？

核心问题有两点：

1. 变换应用顺序相反：GDI+是后调用的变换先生效（矩阵右乘逻辑），而SVG的transform是从左到右依次应用。
2. 矩形基准点不同：GDI+中绘制的矩形是以变换后原点(0,0)为中心的（x=-10到10，y=-5到5），而你SVG的symbol里的矩形是以(0,0)为左上角的，中心在(10,5)。

方案1：调整SVG变换顺序，适配矩形基准 #

通过添加偏移变换，将SVG矩形的中心移到原点后再执行旋转、缩放，最后平移到目标中心：

<svg width="210mm" height="142.5mm" viewBox="0 0 210 142.50" xmlns="http://www.w3.org/2000/svg">
  <line x1="100" y1="0" x2="100" y2="140"  stroke="#000000" stroke-width="0.1"/>
  <line x1="0" y1="100" x2="180" y2="100"  stroke="#000000" stroke-width="0.1"/>
  <!-- 变换顺序：先偏移矩形到中心原点 → 旋转 → 缩放 → 平移到目标点 -->
  <use href="#test" x="0" y="0" transform="translate(100 100) scale(2.2) rotate(27) translate(-10 -5)"/>
  <defs>
    <symbol id="test">
      <rect x="0" y="0" width="20" height="10" fill="#FF0000"  stroke="#008000" stroke-width="0.1"/>
    </symbol>
  </defs>
</svg>

方案2：修改Symbol矩形，对齐GDI+基准 #

直接把SVG矩形改成和GDI+一样以原点为中心，此时transform可以完全对应GDI+的调用逻辑（反转顺序即可）：

<svg width="210mm" height="142.5mm" viewBox="0 0 210 142.50" xmlns="http://www.w3.org/2000/svg">
  <line x1="100" y1="0" x2="100" y2="140"  stroke="#000000" stroke-width="0.1"/>
  <line x1="0" y1="100" x2="180" y2="100"  stroke="#000000" stroke-width="0.1"/>
  <!-- 变换顺序和GDI+调用顺序反转（SVG从左到右应用） -->
  <use href="#test" x="0" y="0" transform="translate(100 100) scale(2.2) rotate(27)"/>
  <defs>
    <symbol id="test">
      <!-- 矩形以原点为中心，和GDI+一致 -->
      <rect x="-10" y="-5" width="20" height="10" fill="#FF0000"  stroke="#008000" stroke-width="0.1"/>
    </symbol>
  </defs>
</svg>

以方案2为例，完全对齐GDI+的变换流程：

• GDI+的实际变换生效顺序：矩形坐标 → 旋转27° → 缩放2.2倍 → 平移到(100,100)
• SVG的transform从左到右应用，所以把GDI+的调用顺序反转，就得到translate(100 100) scale(2.2) rotate(27)，和GDI+的变换逻辑完全等效。

内容的提问来源于stack exchange，提问作者A. Fornés