围绕任意点旋转（svg，css），没有变换原点

Question

我想要旋转，例如svg-rect围绕某个点而不使用transform-origin，比如只使用链式翻译和（origin-）旋转。

由于我的研究，我发现你这样做：

1. 将旋转点转换为原点
2. 旋转
3. 重做（1），说翻译回来

但是当我使用

时

transform="translate(-100, -50) rotate(30)  translate(100, 50)"

与

相比，事实证明它处于错误的位置

transform="rotate(30, 100, 50)"

我为此做了一个小提琴：http://jsfiddle.net/VYmrX/。蓝色矩形是原始矩形，绿色矩形用于比较，红色矩形用上面的方法转换。我希望它围绕它的中心旋转（100,50）。

如何在不使用transform-origin的情况下获得它？

Answer 1

你快到了，但反过来说，

transform="translate(100, 50) rotate(30) translate(-100, -50)"

相当于transform="rotate(30, 100, 50)"

您需要从右到左阅读多个变换，因为它是rightmost part that is applied first。