svg的坐标和snap.svg库的问题

Question

var svgLeftEyeBrow=Snap(current.getElementById("leftEyeBrow"));
var leftEyeBrow=svgLeftEyeBrow.transform().globalMatrix;
leftEyeBrow.rotate(45);
svgLeftEyeBrow.transform(leftEyeBrow);

简单的说我想要通过snap.svg库中的rotate()的方法对下图中的眉毛进行旋转。

但是不管我在rotate中填入什么值，哪怕是rotate(0)，眉毛都会旋转很奇怪的角度

我的问题是：
1、在默认中心点的情况下，为什么元素旋转的角度这么奇怪...

2、svg的坐标和html的坐标是否是一样的？

3、如果我想设置中心点为眉毛的中间，应该这么去获取这个中心点呢..

非常感谢~

Answer 1

rotate(a [<x> <y>])
默认会以左上角原点为旋转中心。 需要指定一下旋转中心，画布viewBox中绝对坐标位置x y。
如：

rotate(45 100 100);