Animation SVG路径动画移动轴

我是一个SVG noob，我正在尝试给这只乌贼制作动画。我不明白为什么右臂一直固定在viewbox的左上角以及我制作的任何动画上。我已经创建了一个css动画属性来尝试抵消它，但是我觉得有一个潜在的问题或者更好的方法来解决这个问题

我把右臂的颜色改成了红色。我想让它做左臂正在做的事情

希望你们能帮忙

这是我的SVG代码

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="220px" height="192.8px" viewBox="0 0 80 192.8" style="enable-background:new 0 0 128 192.8;"
     xml:space="preserve" preserveAspectRatio="xMidyMax meet">
<defs>
</defs>
<g class="squid">
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/>
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/>
<g>
    <path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
</g>
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/>
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/>
<g>
    <g>
        <path id="right-leg" class="right-leg" d="M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2"/>
        <path id="right-foot" class="right-foot" d="M51.6,156.8c-2.3,3-3.8,6.8-3.8,12.1c0,5.1,1.4,8.8,3.1,11.5"/>
    </g>
</g>
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/>
<g class="body">
    <path id="body" d="M85.6,91.1c-0.9-0.7-1.4-1.4-1.7-1.9c-1.5-1.9-2.7-5.9-0.5-6h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3
        c-2-0.8-3.4-2.7-3.4-5c0-2.3,1.5-4.3,3.5-5c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4
        c0,2.4,1.7,4.4,3.9,4.9c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4
        c0,2.8,2.2,5,5,5h1.5c2.3,0,1.6,4.4,0,6c-0.8,0.8-1.7,2.1-3.6,3.5l23.4,8.9L85.6,91.1z M65,43.7L67.4,56l3.1,15.9L63.2,56
        L52.7,33.2l9.9-0.4l-5-27.6l17.3,38L65,43.7z"/>
</g>

  <animate 
            xlink:href="#left-arm"
             attributeName="d" 
             dur="2s"
             begin="0s"
             repeatCount="indefinite"
             values="
                M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;

                     M37.9,6.8c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

                     M20.9,63.7c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5C44.5,121.4,62.7,49.3,78.9,6;

                                          M37.9,6.8c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

                      M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;


            Z;"/>

  <animate 
            xlink:href="#right-arm"
             attributeName="d" 
             dur="2s"
             begin="0s"
             repeatCount="indefinite"
             values="
               M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;

                     M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;

                    M64,63.7c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5C40.4,121.4,22.2,49.3,6,6;

                     M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;


                     M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;


            Z;"/>



  </g>
</svg>

这里有一个到codepen的链接

---

因此，在这方面工作了一天之后，我发现元素位置是特定于其周围元素的。我将AI中的单个路径复制并粘贴到一个代码笔中，实际的矢量信息与左上角对齐，因为其他形状没有粘贴在一起作为参考。我最终改变了实际的矢量数来对齐形状。我唯一需要更改的是M#和每个值前面逗号后面的数字

<animate 
            xlink:href="#left-arm"
             attributeName="d" 
             dur="1s"
             begin="squid.mouseover"
             end="squid.mouseout"
             repeatCount="indefinite"
             values="
               M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;

                     M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

 M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;

M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

                      M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;


            Z;"/>

---

我们怎么知道问题出在哪里？“右臂在改变轴线”对我来说没有任何意义。此外，使用不同的颜色和不透明度，您将更好地了解发生了什么事情。我将一支笔链接到代码笔上。正在移动的右臂一直将自身固定在视图框的左上角，我制作的任何动画都会移动到视图框的左上角。我无法得到您想要的。并添加
填充：绿色和<代码>笔划：右臂和左/右中臂为黄色，否则您将无法理解发生了什么我看到了发生了什么，但是的，我将更改笔划作为示例。我只是不明白为什么它会锚定在左边。
<animate 
            xlink:href="#left-arm"
             attributeName="d" 
             dur="1s"
             begin="squid.mouseover"
             end="squid.mouseout"
             repeatCount="indefinite"
             values="
               M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;

                     M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

 M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;

M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;

                      M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;


            Z;"/>