Question

我在svg中使用带有我的徽标的stoke动画有点问题。我有一个动画，其中包含：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的短的支架。

动画svg笔画不完整

1 个答案: