Animation SVG动画缩放，同时防止组在一端移动

我尝试使用svg动画让蜻蜓拍打翅膀

我是通过在x轴上缩放左右机翼来实现的。问题是当我缩放它时，机翼会移动。我希望机翼的左或右边缘在缩放时保持在一个点上

这是一个机翼的代码

<g id="wing_left">
<g>
    <path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
        c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
    <path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
        c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
    <path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
        C5,118.4-7.2,100.6-1.2,97.7z"/>
    <path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
        c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
                  type="scale"
                  from="1 1" to="0.5 1"
                  begin="0s;wlFlapUp.end" dur="160ms"
                  repeatCount="indefinite"
                   fill="freeze"
        />
<animateTransform id="wlFlapUp" attributeName="transform"
                  type="scale"
                  from="0.5 1" to="1 1"
                  begin="wlFlapDown.end" dur="160ms"
                  repeatCount="indefinite"
                   fill="freeze"
        />
</g>

这里的问题是，所有缩放变换的原点都位于SVG左上角的（0,0）。因此，缩放动画集中在SVG的左侧（x=0）

基本上，您需要移动机翼的坐标空间，以便在应用比例时，机翼以x=0为中心

因此，步骤如下：

使用平移变换移动翅膀，使其以x=0为中心
在此坐标空间中应用缩放动画
用一个变换将其移动回原始位置的组围绕该组
例如：

<g id="wings" transform="translate(270,0)">
  <g>
    <g transform="translate(-270,0)">
      <g "left wing">
      <g "right wing">
    </g>
    <animateTransform .../>
  </g>
</g>



<g id="wings" transform="translate(270,0)">
  <g>
    <g transform="translate(-270,0)">
      <g "left wing">
      <g "right wing">
    </g>
    <animateTransform .../>
  </g>
</g>