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

我正在使用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度。绘制矩形。