围绕任意点旋转(svg,css),没有变换原点

Question

我想在不使用变换原点的情况下围绕特定点旋转例如svg-rect,比如仅使用链式平移和(原点)旋转.

由于我的研究,我发现你这样做:

1. 将旋转点转换为原点
2. 回转
3. 重做(1),说翻译一下

但是当我用的时候

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

事实证明,与...相比,它处于错误的位置

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

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

如何在不使用变换原点的情况下获得它？

Answer 1

你快到了,但反过来说,

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

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

您需要从右到左阅读多个变换,因为它是最先应用的最右边部分.