Как анимировать SVG для рисования линий вместо контуров?

Я пытаюсь анимировать SVG-файл, чтобы он выглядел как можно ближе к gif, я думаю, я довольно близко, но я застрял в проблеме, из-за которой я не знаю, почему контуры нарисованы, а затем все наполнен. Я бы хотел, чтобы все строки были анимированы, как показано на рисунке.

Кто-нибудь знает, что я могу изменить в своем CSS или если в SVG есть что-то, что мне нужно изменить, чтобы сделать это возможным, я совершенно новичок в анимации SVG.

Текущая анимация

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
    <defs>
      <style>
      .cls-1 {
        fill:#f59e00;
      }
      .cls-2 {
        fill:#7a1331;
      }
      #Dots circle {
        fill:#1e9a64;
      }
      #Lines path {
        animation: draw 3s linear forwards;
        animation-delay: 1.2s;
      }

      #Years_Text {
        animation: 1s ease-out 0s 1 slideInFromRight;
      }

      .line-1 {
        stroke-dasharray: 2150;
        stroke-dashoffset: 2150;
      }
      .line-2 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-3 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .line-4 {
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
      }
      .line-5 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-6 {
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }

        @keyframes draw {
          to {
            stroke-dashoffset: 0;
            fill: #1e9a64;
          }
        }


        .dot-1 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-2 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-3 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-4 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-5 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-6 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-7 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-8 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-9 {
          animation: 1s ease-out 0s 1 slideInFromTop;
        }
        .dot-10 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-11 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }
        .dot-12 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }

        @keyframes slideInFromLeft {
          0% {
            transform: translate(-20%, -20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromRight {
          0% {
            transform: translate(+20%, +20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToRight {
          0% {
            transform: translate(-5%, +50%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToLeft {
          0% {
            transform: translate(+15%, +30%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromTop {
          0% {
            transform: translate(-5%, -5%);
          }
          100% {
            transform: translate(0, 0);

          }
        }

        </style>
    </defs>

<g id="Lines">
        <path class="line-1" fill="none" stroke="#1e9a64" stroke-width="2" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
        <path class="line-2" fill="none" stroke="#1e9a64" stroke-width="2" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
        <path class="line-3" fill="none" stroke="#1e9a64" stroke-width="2" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
        <path class="line-4" fill="none" stroke="#1e9a64" stroke-width="2" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
        <path class="line-5" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
        <path class="line-6" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
    </g>


    <g id="Dots">
        <circle class="dot-1" cx="941.03" cy="147.03" r="6.98" />
        <circle class="dot-2" cx="941.23" cy="23.59" r="6.98" />
        <circle class="dot-3" cx="958.83" cy="61.32" r="6.98" />
        <circle class="dot-4" cx="949.22" cy="42.96" r="6.98" />
        <circle class="dot-5" cx="1014.77" cy="165.69" r="6.98" />
        <circle class="dot-6" cx="1045.08" cy="184.35" r="6.98" />
        <circle class="dot-7" cx="1109.85" cy="6.98" r="6.98" />
        <circle class="dot-8" cx="1130.49" cy="6.98" r="6.98" />
        <circle class="dot-9" cx="1109.85" cy="165.69" r="6.98" />
        <circle class="dot-10" cx="1130.49" cy="165.69" r="6.98" />
        <circle class="dot-11" cx="1102.87" cy="105.99" r="6.98" />
        <circle class="dot-12" cx="1102.87" cy="85.35" r="6.98" />
    </g>
</svg>

Разыскиваемая анимация

введите описание изображения здесь

Всего 1 ответ


Основная проблема:

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #1e9a64; <=== this
  }
}

Вы не можете fill поскольку path рисуется только после завершения пути.

Я бы предложил настроить пути так, чтобы расстояние между сторонами пути составляло примерно половину ширины штриха.

В качестве альтернативы, отрегулируйте ширину обводки (скажем, stroke-width="7.5" ) и сделайте круги немного больше (скажем, r="9.98 ) ...

Примерно так (плохое приближение):

svg {
  margin: 5vh
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
    <defs>
      <style>
      .cls-1 {
        fill:#f59e00;
      }
      .cls-2 {
        fill:#7a1331;
      }
      #Dots circle {
        fill:#1e9a64;
      }
      #Lines path {
        animation: draw 3s linear forwards;
        animation-delay: 1.2s;
      }

      #Years_Text {
        animation: 1s ease-out 0s 1 slideInFromRight;
      }

      .line-1 {
        stroke-dasharray: 2150;
        stroke-dashoffset: 2150;
      }
      .line-2 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-3 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .line-4 {
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
      }
      .line-5 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-6 {
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }

        @keyframes draw {
          to {
            stroke-dashoffset: 0;
          }
        }


        .dot-1 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-2 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-3 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-4 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-5 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-6 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-7 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-8 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-9 {
          animation: 1s ease-out 0s 1 slideInFromTop;
        }
        .dot-10 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-11 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }
        .dot-12 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }

        @keyframes slideInFromLeft {
          0% {
            transform: translate(-20%, -20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromRight {
          0% {
            transform: translate(+20%, +20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToRight {
          0% {
            transform: translate(-5%, +50%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToLeft {
          0% {
            transform: translate(+15%, +30%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromTop {
          0% {
            transform: translate(-5%, -5%);
          }
          100% {
            transform: translate(0, 0);

          }
        }

        </style>
    </defs>

<g id="Lines">
        <path class="line-1" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
        <path class="line-2" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
        <path class="line-3" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
        <path class="line-4" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
        <path class="line-5" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
        <path class="line-6" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
    </g>


    <g id="Dots">
        <circle class="dot-1" cx="941.03" cy="147.03" r="9.98" />
        <circle class="dot-2" cx="941.23" cy="23.59" r="9.98" />
        <circle class="dot-3" cx="958.83" cy="61.32" r="9.98" />
        <circle class="dot-4" cx="949.22" cy="42.96" r="9.98" />
        <circle class="dot-5" cx="1014.77" cy="165.69" r="9.98" />
        <circle class="dot-6" cx="1045.08" cy="184.35" r="9.98" />
        <circle class="dot-7" cx="1109.85" cy="6.98" r="9.98" />
        <circle class="dot-8" cx="1130.49" cy="6.98" r="9.98" />
        <circle class="dot-9" cx="1109.85" cy="165.69" r="9.98" />
        <circle class="dot-10" cx="1130.49" cy="165.69" r="9.98" />
        <circle class="dot-11" cx="1102.87" cy="105.99" r="9.98" />
        <circle class="dot-12" cx="1102.87" cy="85.35" r="9.98" />
    </g>
</svg>

Кстати, в SVG есть атрибут pathLength который можно установить вручную, например, pathLength=" " `.

Из CSS-хитрости

Это ничего не делает само по себе (насколько я знаю). Это не так, что он рисует только часть пути - он все равно рисует все как будто вы ничего не делали, только теперь «математика» длины пути основана на значении 1.

Теперь мы можем установить обводку в 1 и анимировать смещение в CSS!

Например

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

Вы можете использовать значительно уменьшить повторение в вашем CSS.


Есть идеи?

10000