How to achieve this svg animation?

问题

world. I am a noob coder, was hoping to get my question answered here for the first time!

I am trying to get something like these (the three animations right under the banner) svg animations for my own website.

/* 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>

I've made the svg via illustrator, and then exported the code into my coding program of choice, however I am unsure how to actually animate the lines so that it starts at one point and traces to another in a different color, in a variety of directions.

Hopefully i'm making sense here, any help would be awesome. Let me know if you have any solutions or resources that can help me to achieve this.

回答1:

You might want to take a look at this article for more information on how to animate SVG lines: https://css-tricks.com/svg-line-animation-works/

Here is an example using your SVG shape:

<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;
}
}

Codepen: https://codepen.io/kostasx/pen/yLLLeXJ?editors=1100

回答2:

I had a similar project where animations posed a challenge. I initially tried out using a video, then a GIF, but finally ended up using SVG.

Although, there isn't a straight solution like a method to call because each animation is unique, here are options that can help you get started.

SVG animation libraries like GreenSock or SnapSVG
Using Airbnb Lottie - you can design using Adobe Illustrator and Lottie will output as JSON

I ended up using Lotties, as the JSON structure was a handy approach.

来源：https://stackoverflow.com/questions/58244488/how-to-achieve-this-svg-animation

标签

javascript

html

css

animation

svg