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

【问题标题】：SVG mutltiple transform - rotate then translate horizontallySVG 多重变换 - 旋转然后水平平移
【发布时间】：2019-07-30 20:41:36
【问题描述】：

我尝试使用 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。

谢谢，

【问题讨论】：

先翻译后旋转
是的，我认为这可行，只需收集所有平移以获得总平移，然后是总旋转，然后是总比例，然后按该顺序应用这些变换。此外，我需要跟踪对象的中心，以便它始终围绕其中心旋转。感谢您的帮助

【解决方案1】：

如果您希望轮换首先发生，则必须将其放在您的 transform 属性中。

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

为什么？因为上面的sn -p等价于

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

【讨论】：