animation - 如何为 svg 的 animateTransform 设置原点

Question

如果您查看此 SVG，我正在为 transform 属性设置动画，默认情况下它从左上角移动。如何将其更改为从中心设置动画？

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#495ade"/>
  <g>
  <circle cx="50" cy="50" r="50" fill="#49de7d"/>
  <animateTransform attributeName="transform"
                    type="scale"
                    values="1 1;.5 .5;1 1"
                    begin="0s"
                    dur="1.5s"
                    repeatCount="indefinite"
                    calcMode="spline"
                    keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
                />
  </g>
</svg>

我已经尝试过的:
This answer说只在列出的每个值之后抛出 X 和 Y 坐标。所以我尝试了 values="1 1 50 50;.5 .5 50 50;1 1 50 50"但这会杀死动画。
您也可以使用 from和 to而不是 values ，并包括 X 和 Y 原点，但我需要 3 个动画状态，而不是两个。

Answer 1

代替动画animateTransform type =" scale " ，可以使用增加圆半径的动画
在这种情况下，不需要定义 transform-origin因为圆圈位于 Canvas 的中心。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#495ade"/>
  <g>
  <circle cx="200" cy="200" r="50" fill="#49de7d">
  <animate attributeName="r"
                    values="50;25;50"
                    begin="0s"
                    dur="1.5s"
                    repeatCount="indefinite"
                    calcMode="spline"
                    keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
                /> 
    </circle>           
  </g>
</svg>

在中间状态暂停动画

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#495ade"/>
  <g>
  <circle cx="200" cy="200" r="50" fill="#49de7d">
  <animate attributeName="r"
                    values="50;25;25;50;50"
                    begin="0s"
                    dur="1.5s"
                    repeatCount="indefinite"               
                /> 
    </circle>           
  </g>
</svg>

更新
考虑实现 CSS 动画

#crc1 {
transform-origin:center;
transform-box:fill-box;
animation: scale 1.5s infinite;
}

@keyframes scale {
0%{transform:scale(1);}
50%{transform:scale(.5);}
100%{transform:scale(1);}
}

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#495ade"/>
  <g>
  <circle id="crc1" cx="200" cy="200" r="50" fill="#49de7d"/>
   </g>
</svg>

Upd2
微笑动画
来自 的优秀建议@Sphinxxx ，将css规则添加到group标签，从而保留 animateTransform SVG

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#495ade"/>
  <g style="transform-origin: center; transform-box: fill-box;">
  <circle  cx="200" cy="200" r="50" fill="#49de7d"/>
  <animateTransform attributeName="transform"
                    type="scale"
                    values="1 1;.5 .5;1 1"
                    begin="0s"
                    dur="1.5s"
                    repeatCount="indefinite"
                    calcMode="spline"
                    keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
                />
  </g>
</svg>