У меня есть SVG-файл, в котором я хочу l oop анимацию до бесконечности. Я не понимаю, как я могу сделать это

Question

Вот SVG - я пытаюсь установить svg во время загрузки в VueJs. Но проблема в том, что он запускается только с первой попытки, любая помощь приветствуется. Раньше я думал, что могу каждый раз перезагружать указанный компонент c, но, похоже, это тоже не работает.

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

Answer 1

Вот как решить эту проблему:

1. Чтобы анимация работала непрерывно, а не один раз, установите в animateMotion следующее:

repeatCount="indefinite"

Требуется анимация go вперед и назад:

• В момент t0 (начало цикла анимации) элемент должен находиться в начальной позиции
• В середине анимации. элемент должен быть в конечной позиции
• В момент t1 (конец цикла анимации) элемент должен вернуться в исходную позицию.

Это может управляться с помощью keyPoints и keyTimes.

Снова внутри animateMotion следующее соответствует циклу анимации, как описано выше.

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

Фрагмент кода ниже показывает решение в действии в одном из анимированных прямоугольников из примера кода, используемого в вопросе.

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

Читайте также: этот ответ .

<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 transform="matrix(1,0,0,1,900,-5.68434e-14)">

        <path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
            <animateMotion path="M-900,0L0,0" begin="0.5s" dur="2s" fill="freeze" keyPoints="0;1;0" keyTimes="0;.5;1" repeatCount="indefinite"/>
            <animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
        </path>
     </g>
</svg>