css - 动画 svg 描边不完整

Question

我在 svg 格式的 stoke 动画中遇到了一个小问题。我有一个动画:CSS 中的 stroke-dashoffset 属性。

但是悬停时的标志并没有完全完成所有的动画。该 Logo 应该制作动画以用线条建立自己。动画工作但不完全。

检查我的 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 和 start dashoffset 设置为这三个长度中最长的一个，动画将会完成。

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

和

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

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

然而，这意味着括号比“M”更短，完成得更快。如果你不喜欢那样，你可以有两个动画。长的 M 和短的 1277 括号。