css - 围绕任意点旋转 (svg, css)，无需 transform-origin

Question

我想旋转，例如围绕某个点的 svg-rect 而不使用 transform-origin，比如只使用链式平移和(原点)旋转。

根据我的研究，我发现你是这样做的:

1. 将旋转点平移到原点
2. 旋转
3. 重做(1)，说把它翻译回来

但是当我使用

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

结果是渲染在错误的位置相比

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

我为此做了一个 fiddle :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 .