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 度。在其中绘制了矩形。

SVG mutltiple transform - rotate then translate horizontally