如何修改SVG缩放动画，使其从中心点而非左上角缩放？

<svg id="spinnerLoaderRef"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 100 100"
     width="150"
     height="150"
     overflow="visible"
     fill="#20207A"
     stroke="none"
     class="single-loader">
    <defs>
        <!-- 移除transform，直接设置cy为20，对应原translate(0 -30)的位置 -->
        <circle id="spinner"
                r="8"
                cx="50"
                cy="20" />
    </defs>
    <use xmlns:xlink="http://www.w3.org/1999/xlink"
         xlink:href="#spinner">
        <animate attributeName="opacity"
                 values="0;1;0"
                 dur="1s"
                 begin="0s"
                 repeatCount="indefinite" />
        <!-- 添加origin属性指定缩放原点为圆的中心(50,20)，实现中心点缩放 -->
        <animateTransform attributeName="transform"
                          type="scale"
                          additive="sum"
                          dur="1s"
                          begin="0.13s"
                          repeatCount="indefinite"
                          from="1"
                          to="0.8"
                          origin="50 20"></animateTransform>
    </use>
</svg>

修改说明 #

• 调整元素位置: 把原circle的transform="translate(0 -30)"替换为直接设置cy="20"，让元素的中心坐标(50,20)更直观，便于指定缩放原点。
• 设置缩放原点: 在animateTransform标签中添加origin="50 20"，这个坐标就是圆的中心位置，动画会以此为原点完成从1到0.8的缩小效果，替代默认的左上角(0,0)原点。
• 保留原有动画逻辑: 其他动画参数（透明度变化、时长、重复次数等）均保持不变，确保原有视觉节奏不受影响。

内容的提问来源于stack exchange，提问作者Park Jang