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

Question

使用 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 的转换属性，从而按顺序转换对象。但平移需要相对于视口，而不是对象的旋转方式。

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

我也不想使用css。

谢谢，

Answer 1

如果您希望首先进行轮换，则必须将其放在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 度的单独坐标系。其中绘制了矩形。