SVG路径动画切换轴

我是SVG noob，并且正在尝试对此Squid进行动画制作。我无法理解为什么右手臂一直将自己锚定在视框的左上角以及任何动画。我已经创建了一个CSS动画属性来尝试抵消它，但我觉得有一个潜在的问题或更好的方法来做到这一点/解决这个问题。SVG路径动画切换轴

我已将右臂的颜色更改为红色。我想让它做左手臂正在做的事情。

希望你们可以帮忙。

这是我的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

来源

2016-11-16 alcoven

我们该如何知道问题在哪里？ “右臂正在改变轴线”对我来说并不意味着什么。同样以不同的颜色和不透明度，你会更好地了解发生了什么 – reuns

我在代码笔上连接了一支笔。正在移动的右臂将自身锚定在视图框的左上角，以及任何动画移动到视图框左上角的任意位置。 – alcoven

我没有得到你想要的。并在右臂和左/中臂加上'fill：green;'和'stroke：yellow'，否则你不会理解发生了什么 – reuns

的链接在此工作的一天，我想通了，一个元素后，因此，位置是特定于其周围的元素。我从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

来源

2016-11-17 02:16:24 alcoven

SVG路径动画切换轴

回答

相关问题