SVG转型

时间:2015-11-08 20:19:03

标签: svg rotatetransform

我希望将S.V.G 600px上的每个形状向下移动,因为我以前的S.V.G的初始坐标位于"左下角"但是在我的新S.V.G中,它位于左上角"为了显示先前S.V.G在新S.V.G上的形状,我只是用来将先前的S.V.G高度,即600px添加到Y平移中,并且它的形状工作得很好,如:

<g id="shape3165-80" transform="translate(105.375,-208.875)"></g>

由于新点是(105.375,391.125),从上面的208.875开始是正确的。

但是在旋转形状的情况下,它没有显示正确的位置,因为旋转它的转换点已经改变,例如: 如果:

<g id="shape3164-77" transform="translate(263.251,868.355) rotate(180)"></g>

所以在添加600px时,它的坐标变为(263.251,1468.355),它们显示出S.V.G框。 所以我想找到:

  1. 旋转180度前形状的初始平移点。
  2. 然后添加600px。
  3. 然后再用180度旋转它。
  4. 所以我的问题是我是以正确的方式做到的吗?你能帮我找出相同的解决方案或公式吗?

1 个答案:

答案 0 :(得分:0)

因为形状旋转了180度,您需要从Y坐标中减去600而不是添加600.

所以第二个例子应该是:

<g id="shape3164-77" transform="translate(263.251,268.355) rotate(180)"></g>

或者,在其他变换之前添加600:

<g id="shape3164-77" transform="translate(263.251,868.355) rotate(180) translate(0,600)"></g>

(由于transform属性的工作方式,您可以考虑从右到左应用变换。因此,首先应用变换,必须将其放在最后)。