使用jquery移动SVG圈元素

Question

我有以下HTML代码

<svg>
<circle cx="50%" cy="50%" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

然后我从浏览器控制台运行以下Javascript代码：

jQuery('circle').attr('cy');

这给出了输出：

SVGAnimatedLength {animVal: SVGLength, baseVal: SVGLength}

但是对于输出，我期待字符串50%。为什么它没有给我字符串50%？同样，如果我做了

jQuery('circle').attr('cy', '55%');

我预计这个圈子会下降5％。但什么都没发生。

如何使用jQuery移动此圈？