我希望能够通过链式平移和旋转(不使用transform-origin)来围绕特定点旋转svg-rect等对象。
我已经为此制作了一个示例: http://jsfiddle.net/VYmrX/。蓝色矩形是原始矩形,绿色矩形是用于比较的矩形,而红色矩形则是使用上述方法变换的。我希望它围绕其中心点 (100, 50) 旋转。
如何在不使用 transform-origin 的情况下实现这一点?
根据我的调研,我发现如下操作可以实现:
- 将旋转点平移到原点位置
- 进行旋转
- 重复步骤1,将其平移回原来的位置
但是当我尝试这样做时,出现了问题。
transform="translate(-100, -50) rotate(30) translate(100, 50)"
原来它的呈现位置与相关内容相比是错误的
transform="rotate(30, 100, 50)"
我已经为此制作了一个示例: http://jsfiddle.net/VYmrX/。蓝色矩形是原始矩形,绿色矩形是用于比较的矩形,而红色矩形则是使用上述方法变换的。我希望它围绕其中心点 (100, 50) 旋转。
如何在不使用 transform-origin 的情况下实现这一点?