SVG多重变换-旋转然后水平平移

使用SVG，我试图将其旋转30度，然后水平平移100度。问题是，当我旋转坐标系时，它是旋转的，因此当我尝试平移时，我将沿着旋转的x轴平移对象，该轴现在与水平面成30度

旋转后有没有办法水平平移

<g transform="rotate(30 50 50) translate(100 0)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

我想为上、下、左、右旋转和平移创建控制按钮。这些将创建一个字符串，该字符串将使用数据绑定到svg的transform属性，从而按顺序变换对象。但是平移需要相对于视口，而不是对象的旋转方式

我正在使用vue.js框架进行数据绑定

我也不想使用css

---

谢谢，

如果希望先进行旋转，则必须在

transform

属性中放置最后一个

<g transform="translate(100 0) rotate(30 50 50)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>

为什么?？因为上面的代码片段相当于

<g transform="translate(100 0)">
   <g transform="rotate(30 50 50)">
      <rect x="0" y="0" fill="blue" width="100" height="100" />
   </g>
</g>

您可以认为转换是从内到外进行的。矩形在外部平移变换之前受内部旋转变换的影响

---

或者换一种方式来考虑，外部变换创建了一个向右移动100的新坐标系。其中有一个单独的坐标系，旋转30度。将绘制矩形。

如果希望先旋转，则必须将最后一个放置在

变换属性中

<g transform="translate(100 0) rotate(30 50 50)">
   <rect x="0" y="0" fill="blue" width="100" height="100" />
</g>



为什么?？因为上面的代码片段相当于

<g transform="translate(100 0)">
   <g transform="rotate(30 50 50)">
      <rect x="0" y="0" fill="blue" width="100" height="100" />
   </g>
</g>



您可以认为转换是从内到外进行的。矩形在外部平移变换之前受内部旋转变换的影响

或者换一种方式来考虑，外部变换创建了一个向右移动100的新坐标系。其中有一个单独的坐标系，旋转30度。绘制矩形。
先平移，然后旋转。我认为这会起作用，只要收集所有平移，得到总平移，然后是总旋转，然后是总缩放，然后按顺序应用这些变换。我还需要跟踪物体的中心，以便它始终围绕其中心旋转。谢谢你的帮助先平移然后旋转眼睛我想这会有用的，只要收集所有的平移，得到一个总平移，然后是一个总旋转，然后是一个总比例，然后按顺序应用这些变换。我还需要跟踪物体的中心，以便它始终围绕其中心旋转。谢谢你的帮助