动画svg笔画未完成

Question

我有一个小问题与我的logo在svg的斯托克动画。我有一个动画与:stroke-dashoffset属性在CSS。

但徽标悬停不做所有的动画完全。这个标志应该是一个动画来建立自己的线条。动画工作，但不是完全。

检查我的jsfiddle，看看代码的问题。https://jsfiddle.net/ytkL4b5d/HTML

<div id="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 733.9 500" style="enable-background:new 0 0 733.9 500;" xml:space="preserve">
                    <polygon class="logo" id="XMLID_56_" points="193.7,39.2 193.7,454.2 228.4,454.2 228.4,454.2 469,454.2 469,419.5 228.4,419.5 228.4,131.2 
                        366.9,288.8 505.2,129.9 505.2,454.2 539.9,454.2 539.9,37.2 366.7,236.1  "/>
                    <path class="logo" id="XMLID_101_" d="M47.3,85.2c0,16.8,2.4,33,4.8,49.8c2.4,16.8,4.8,33.6,4.8,50.4c0,21-6,44.4-48.6,44.4v30.6
                        c42.6,0,48.6,25.8,48.6,44.4c0,16.2-2.4,32.4-4.8,48.6c-2.4,16.2-4.8,33-4.8,49.2c0,60.6,37.2,82.2,87,82.2h12.6v-33h-10.8
                        c-33.6,0-47.4-18.6-47.4-52.2c0-14.4,1.8-28.2,4.2-43.2c2.4-14.4,4.2-29.4,4.2-45.6c0.6-38.4-16.2-58.8-43.2-65.4v-1.2
                        c27-7.2,43.8-26.4,43.2-64.8c0-16.2-1.8-30.6-4.2-45.6c-2.4-14.4-4.2-28.8-4.2-42.6c0-32.4,12-51.6,47.4-51.6h10.8v-33h-12.6
                        C83.3,6.6,47.3,30,47.3,85.2z"/>
                    <path class="logo" id="XMLID_102_" d="M675.5,185.4c0-16.8,2.4-33.6,4.8-50.4c2.4-16.8,4.8-33,4.8-49.8c0-55.2-36.6-78.6-87.6-78.6h-12v33h10.8
                        c34.8,0.6,47.4,19.2,47.4,51.6c0,13.8-2.4,28.2-4.2,42.6c-2.4,15-4.8,29.4-4.8,45.6c0,38.4,16.8,57.6,43.2,64.8v1.2
                        c-26.4,6.6-43.2,27-43.2,65.4c0,16.2,2.4,31.2,4.8,45.6c1.8,15,4.2,28.8,4.2,43.2c0,33.6-14.4,51.6-48,52.2h-10.2v33h12.6
                        c49.2,0,87-21.6,87-82.2c0-16.2-2.4-33-4.8-49.2c-2.4-16.2-4.8-32.4-4.8-48.6c0-18.6,6-44.4,48.6-44.4v-30.6
                        C681.5,229.8,675.5,206.4,675.5,185.4z"/>
                </svg>
</div>

CSS (scss):

#logo{
    width:120px;
    height:auto;
    float:left;
    margin-left:20px;
    margin-top:0px;
.logo{
        width: 120px;
        height: auto;
        padding: 5px;
        fill: #000;
        animation: dashreverse 5s ease;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
        -o-transition: all 400ms ease-in-out;
        transition: all 400ms ease-in-out;
    }
    &:hover{
        .logo{
            fill: transparent;
            stroke: #000;
            stroke-width: 4px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;
            transition: .2s;
            animation: dash 4s ease;
        }
    }
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

**我想也许问题是我的svg是如何制作的。我使用Illustrator制作并生成svg

Answer 1

问题是您的dasharray长度为1000。为了使动画正常工作，你使用的长度必须与元素的路径长度相匹配。

元素的路径长度远远大于1000。"M"的长度为2977，两个括号的长度分别为1277和1276。

如果您设置dasharray并启动dashoffset为这三个长度中最长的，则动画将完成。

.logo{
   ...
   stroke-dasharray: 2977;
   ...
}

和

@keyframes dash {
  from {
    stroke-dashoffset: 2977;
  }
  to {
    stroke-dashoffset: 0;
  }
}

https://jsfiddle.net/ytkL4b5d/1/

然而，这意味着括号更短，比"M"完成得更快。如果你不喜欢，你可以有两个动画。长一点的字母M，短一点的字母1277代表括号。