asked on

CSS or jQuery to animate SVG

jQuery or CSS to animate a lightening bolt.

I have an SVG that I would like to animate. I want to fill it from top to bottom, so it is like a lightening bolt. I know there are ways to use javascript to fill it but I have NO IDEA where to start.

The following is the SVG I would like to fill from top to bottom.

<svg version="1.1" id="bolt_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                                         viewBox="0 0 600 612" style="enable-background:new 0 0 600 612;" xml:space="preserve">
                                                                <style type="text/css">
                                                                    .bolt_st0{opacity:0;fill:#FFFFFF;}
                                                                    .bolt_st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D42229;}
                                                                    .bolt_st2{fill:none;}
                                                                </style>
                                                                <rect x="154.4" y="41" class="bolt_st0" width="276" height="530"/>
                                                                <polygon class="bolt_st1" points="192,569.5 430.2,270.9 321.2,253.1 415.3,41.1 155.2,322.3 263.2,345.6 "/>
                                                                <rect x="154.4" y="41" class="bolt_st2" width="276" height="530"/>
                                                                </svg>

Open in new window

Dave Baldwin

If you only are going to do it once, this web site may be what you need: https://www.svgator.com/

Robert Granlund

ASKER

No, I need to fill the SVG (Polygon) from top to bottom

ASKER CERTIFIED SOLUTION

Brian Dayhoff

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial