如何使用Jquery基于原点旋转svg图像

Question

我有以下代码来创建针的SVG图像（类似于速度表中的针）。

<circle class="needle-center" cx="200" cy="200" r="5"></circle>
<path class="needle" d="M 195 198 L 200 100 L 205 202  "></path>
<button id="test">Click Here</button>

点击按钮我试图使用Jquery功能旋转svg图像。

  $("#test").click(function () {
        $('.needle').css(" transform-origin", "bottom");
        $('.needle').attr("transform", "rotate(45)");
        });

而不是旋转它只是随机移动。我怎样才能解决这个问题？是否有更好的方法来制作svg动画？ （我是SVG的新手）

点击之前：

点击后：