Анимация svg stroke не завершена

Question

У меня есть небольшая проблема с анимацией стоков с моим логотипом в 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-(СКС):

#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. «М» имеет длину 2977 и YHE две скобы имеют длину 1277 и 1276

Если установить dasharray и начать dashoffset к самая длинная из этих трех длин, анимация будет завершена.

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

и

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

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

Однако это означает, что скобки, будучи короче, закончить намного раньше, чем "М". Если вам это не нравится, у вас может быть две анимации. Длинный для M и короткий один из 1277 для скобок.