javascript - 如何实现这个svg动画？

Question

世界。我是一个菜鸟编码员，希望第一次在这里回答我的问题!

我正在尝试获取类似于 these 的内容(横幅下方的三个动画)我自己网站的 svg 动画。

/* CSS */

svg {
      max-width: 95%;
      max-height: 95%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    /* HTML */ 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
    	 height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#999999;}
    	.st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
    </style>
    <defs>
    </defs>
    <g>
    	<path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/>
    </g>
    <line class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/>
    <polyline class="st1" points="1,97.65 14.31,97.65 62,97.65 "/>
    <line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/>
    <line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/>
    </svg>

我已经通过 illustrator 制作了 svg，然后将代码导出到我选择的编码程序中，但是我不确定如何实际为线条设置动画，以便它从一个点开始并以不同的颜色追踪到另一个点，各个方向。

希望我在这里说得通，任何帮助都会很棒。如果您有任何解决方案或资源可以帮助我实现这一目标，请告诉我。

Answer 1

您可能想查看这篇文章以获取有关如何为 SVG 线条设置动画的更多信息:https://css-tricks.com/svg-line-animation-works/

这是一个使用 SVG 形状的示例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
        height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#999999;}
        .st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
    </style>
    <defs>
    </defs>
    <g>
        <path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/>
    </g>
    <line  class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/>
    <polyline  class="st1" points="1,97.65 14.31,97.65 62,97.65 "/>
    <line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/>
    <line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/>
</svg>

svg {
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
svg .st0{
stroke:#4444ff;
stroke-width:2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

代码笔:https://codepen.io/kostasx/pen/yLLLeXJ?editors=1100