SVG旋转是负角度

Question

我正在玩一些SVG并尝试理解为什么我的SVG正在旋转负角度。我想让我的红线围绕我的绿色圆圈旋转。

图片和代码更容易显示我的意思：

0度：

90度：

0度代码：

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(256, 256) rotate(0, 80, 80)"> <circle r="70" cy="80" cx="80" fill="#6fdb6f" /> <line x1="160" y1="80" x2="256" y2="80" style="stroke:rgb(255,0,0);stroke-width:10"/> </g> </svg>

90度代码：

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(256, 256) rotate(90, 80, 80)"> <circle r="70" cy="80" cx="80" fill="#6fdb6f" /> <line x1="160" y1="80" x2="256" y2="80" style="stroke:rgb(255,0,0);stroke-width:10"/> </g> </svg>

JS Fiddle Example