I have SVG file in which I want to loop the animation indefinitely. I fail to understand how I can accomplish that

Question

Here is the SVG - What I'm trying to do is to put this svg during load time in VueJs.But the issue is that it runs only for the first try, any help is appreciated. I previously thought that I can may be reload the specific component every time but that also doesn't seem to work.

<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                        <g>
                            <g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
                                <rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
                            </g>
                            <path d="M300,240L510,240" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M540,320L720,320" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M360,380L560,380" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M300,500L600,500" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M405,600L580,600" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M500,700L700,700" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M600,200L700,200" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M300,800L500,800" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M400,900L700,900" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                        </g>
                        <g transform="matrix(1,0,0,1,900,-5.68434e-14)">
                            <g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
                                <rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
                            </g>
                            <path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="1.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="1.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M540,320L720,320" style="fill:none;stroke:rgb(206,59,59);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="0s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="0s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M360,380L560,380" style="fill:none;stroke:rgb(0,255,95);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="2.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="2.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M300,500L600,500" style="fill:none;stroke:rgb(255,183,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="2s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="2s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M405,600L580,600" style="fill:none;stroke:rgb(189,255,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="4s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="4s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M500,700L700,700" style="fill:none;stroke:rgb(255,6,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="3.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="3.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M600,200L700,200" style="fill:none;stroke:rgb(47,0,255);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="0.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M300,800L500,800" style="fill:none;stroke:rgb(0,205,255);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="4.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="4.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M400,900L700,900" style="fill:none;stroke:rgb(161,133,77);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="5.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="5.5s" dur="1s" fill="freeze" />
                            </path>
                        </g>
                        <g transform="matrix(0.5,0,0,1,95,0)">
                            <path d="M250,67.5C250,63.361 243.279,60 235,60L205,60C196.721,60 190,63.361 190,67.5L190,1042.5C190,1046.64 196.721,1050 205,1050L235,1050C243.279,1050 250,1046.64 250,1042.5L250,67.5Z" style="fill:rgb(79,227,43);stroke:black;stroke-width:1.26px;" />
                            <animateMotion path="M0,0L600,0L0,0" begin="0s" dur="5s" repeatCount="indefinite" />
                        </g>
                        <g transform="matrix(1,0,0,1,0,-60)">
                            <path d="M820,613.75L820,596.25L1055,596.25L1055,580L1080,605L1055,630L1055,613.75L820,613.75Z" style="fill:rgb(64,67,211);stroke:rgb(30,82,211);stroke-width:1px;" />
                        </g>
                 
                    </svg>

The green shape is animated indefinitely, as its animateMotion has `repeatCount="indefinite"`. The other animations do not have `repeatCount` set, so they run only once. Everything seems to be running as expected. Please edit the question to clarify what is the expected behaviour. — Mehdi, Mar 29 '20 at 12:05
Thanks for the reply @Mehndi. What I want is the movement of those lines to be repeated from left to right again and again. so basically once every line is moved to the right side. It should start all over again. By putting repeatCount on those lines it wont animate the movement but only apear on the right side as blinking lines. I hope I was able to clarify. — Yash Gaur, Mar 29 '20 at 12:09

score 2 · Answer 1 · answered Mar 29 '20 at 12:52

Here is how to solve this problem:

In order to have the animation running continuously rather than only once, set the following inside animateMotion:

repeatCount="indefinite"

You want the animation to go forth and back:
- At t0 (animation cycle start), the element should be at the initial position
- At mid-time of the animation, the element should be at the final position
- At t1 (animation cycle end), the element should be back to the initial position.

This can be controlled with keyPoints and keyTimes.

Again inside animateMotion, the following corresponds to the animation cycle as described above.

keyPoints="0;1;0" keyTimes="0;.5;1"

The snippet below shows the solution in action in one of the animated rectangles from the sample code shared in the question.

Please note that the animation durations must be doubled in order to keep the same movement speed as in the question, since now the movement length is twice larger (forth and back) instead of one way).

I have SVG file in which I want to loop the animation indefinitely. I fail to understand how I can accomplish that

1 Answers1