Snap.svg以圆周运动为旋转动画

Question

我想为围绕点的旋转设置动画。我遇到的问题是，即使对象的最终位置正确，到达该对象的对象的运动也不是圆形的。

这是代码段。单击图像以运行动画。

var origin = Snap('#origin');
var pointer = origin.select("#pointer");

const paper = document.getElementById("origin");
paper.addEventListener("click", () => {
  pointer.transform('r0,120,172');
  pointer.animate({
    transform: "R90,120,172"
  }, 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg id="origin" height="100mm" width="100mm">
          <g
             id="layer1">
            <circle
               r="45"
               cy="172"
               cx="120"
               id="circle"
               style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ff0000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
            
            <path
               id="pointer"
               d="m 125,182.3622 -10,0 5,-55 z"
               style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
          </g>
</svg>

这对我来说很有意义，因为转换仅指定所需的最终位置，而中间没有任何内容。

有趣的是，此示例在这里： http://svg.dabbles.info/snaptut-animategroup 似乎工作正常。但我看不出有什么区别。

我在做什么错？用Snap.svg制作圆形旋转动画的正确方法是什么？