SVG 路径动画移轴

Question

我是一个 SVG 菜鸟，我正在尝试为这个 Squid 制作动画。我不明白为什么右臂一直固定在视图框的左上角以及我动画的任何东西上。我创建了一个 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>

CSS

.left-arm,
.right-arm,
.right-leg,
.left-leg,
.right-foot,
.left-mid-arm,
.right-mid-arm{
  fill:none;
  stroke:#000000;
  stroke-width:12; 
  stroke-linecap:round;
  stroke-miterlimit:10;
}

g.squid {
  margin-left:20px;
}

.lightning {
  fill:white;
}

g.body {
  fill:black;
}

.left-arm {
  animation: left-arm 2s infinite;
}

.right-arm {
  animation: right-arm 2s infinite;
}

@keyframes left-arm {
    0% {transform: translate(0px,0px);}
    20% {transform: translate(0px,0px);}
    40% {transform: translate(-15px,50px);}
    80% {transform: translate(0px,0px);}
    100% {transform: translate(0px,0px);}
}

@keyframes right-arm {
    0% {transform: translate(0px,0px);}
    20% {transform: translate(0px,0px);}
    40% {transform: translate(60px,50px);}
    80% {transform: translate(0px,0px);}
    100% {transform: translate(0px,0px);}
}

这里是codepen的链接 http://codepen.io/alcoven/pen/NbRNdd

Answer 1

因此，经过一天的工作，我发现元素位置特定于其周围元素。我正在将 AI 中的单个路径复制并粘贴到 codepen 中，实际的矢量信息与左上角对齐，因为其他形状没有与它一起粘贴以供参考。我最终更改了实际的向量编号以对齐形状。我唯一需要更改的是 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;"/>

这是我的新笔 悬停在上面。

http://codepen.io/alcoven/pen/mOrYBd?editors=1100