svg path css анимация приостановлена, jquery работает

Question

Я пытаюсь использовать SVG, анимированные css. Моя первая проблема заключалась в том, что он автоматически запускался, поэтому после небольшого поиска я обнаружил, что могу объявить его как приостановленный, а затем вызвать его из jQuery, используя $("path").css("animation-play-state", "running");

Моя проблема сейчас в том, что да, он срабатывает, когда должен, но он как будто запускает анимацию и через миллисекунды останавливается примерно на 1 секунду и плавно возобновляется до конца.

Кто-нибудь знает, что может быть причиной такого поведения? анимация бесполезна ...

HTML

<div class="page_wrapper_home">
        <div id="logo_home">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 1183.1 223" style="enable-background:new 0 0 1183.1 223;" xml:space="preserve">
                <style type="text/css">
                    .st0 {
                        fill: #2A4054;
                        stroke: #2A4054;
                        stroke-width: 3;
                        stroke-miterlimit: 10;
                    }
                </style>
                <g>
                    <path class="st0" d="M54.2,212.8c-6.8-1.2-12.9-3.4-18.4-6.7c-5.5-3.3-10.5-7.3-15-12.1c-5.1-5.9-8.6-12.3-10.7-19.4
        c-2.1-7.1-3-14.4-2.7-22c0.3-4.8,1.3-9.6,3.2-14.4c1.9-4.8,4.1-9.1,6.8-13c5.5-7.5,11.8-13.1,19-16.8c7.2-3.7,14.6-5.9,22.3-6.4
        c7.7-0.5,15.2,0.5,22.5,3c7.3,2.5,13.9,6.3,19.6,11.4c5.7,5.1,10.3,11.3,13.6,18.7c3.3,7.4,4.8,15.7,4.4,24.9H66.2v-5.6h47.6v-0.8
        c-2.3-18-11.1-31.6-26.6-40.8c-4.7-2.8-9.7-4.6-15.1-5.4c-5.4-0.8-10.8-0.9-16.1-0.2c-6,0.7-11.7,2.5-17,5.5
        c-5.3,3-9.9,6.7-13.8,11.1c-5.6,6.3-9.3,13.2-11.2,20.7c-1.9,7.5-2.1,14.9-0.7,22.2c1.4,7.3,4.4,14.1,9,20.4
        c4.6,6.3,10.5,11.5,17.7,15.5c3.5,1.9,7.2,3.2,11.2,4c4,0.8,7.9,1.5,11.8,2v4.6c-1.7,0-3.2,0-4.5,0
        C57.2,213.2,55.8,213.1,54.2,212.8z" />
                    <path class="st0" d="M136.8,106.8l53.6,100.4L240,106.8h5.4v0.4c0,0.3-0.1,0.7-0.4,1.2c-0.3,0.5-0.4,0.9-0.4,1.2l-51,103.6H188
        l-57.2-106.4H136.8z" />
                    <path class="st0" d="M264.5,211.4l-0.6,1.8h-6.6l1.8-4.2l87-198c0.9-2.1,4.5-2.1,5.4,0l87,198l1.8,4.2h-6.6l-0.6-1.8L348.8,19.7
        L264.5,211.4z" />
                    <path class="st0" d="M585.5,211.4l-0.6,1.8h-6.6l1.8-4.2l87-198c0.9-2.1,4.5-2.1,5.4,0l87,198l1.8,4.2h-6.6l-0.6-1.8L669.8,19.7
        L585.5,211.4z" />
                    <path class="st0" d="M825,215c-9.7-1.6-18-5-24.8-10.3c-6.8-5.3-12.6-12.1-17.4-20.5v29h-5.6v-167h5.6v88.4
        c2.5-4.3,5.4-8.3,8.5-12.1c3.1-3.8,6.8-7.1,11.1-9.9c5.7-3.6,12.2-6.2,19.4-7.9c7.2-1.7,14.2-1.8,21-0.3c8.9,1.7,16.6,5,23.1,9.9
        c6.5,4.9,11.6,10.6,15.4,17.2c3.8,6.6,6.2,13.7,7.2,21.3c1,7.6,0.5,15-1.4,22.3c-1.9,7.3-5.4,14-10.5,20.2
        c-5.1,6.2-11.7,11.2-20,15.1c-4.8,2.3-10,3.8-15.5,4.7C835.5,216,830.2,215.9,825,215z M823.6,209.4c0.3,0,0.8,0.1,1.6,0.2
        c0.8,0.1,1.3,0.2,1.6,0.2h12.8c4.3-0.1,8.5-1.1,12.8-3c4.3-1.9,8.2-4.3,11.9-7.3c3.7-3,6.9-6.4,9.8-10.2c2.9-3.8,5-7.6,6.3-11.5
        c0.7-2.1,1.4-4.3,2.1-6.6c0.7-2.3,1.1-4.5,1.1-6.8c0.4-10.4-1.4-19.5-5.3-27.2c-3.9-7.7-9.1-13.9-15.4-18.6
        c-6.3-4.7-13.4-7.7-21.3-9.1c-7.9-1.4-15.6-1-23.1,1.1c-7.5,2.1-14.4,6.1-20.6,12c-6.2,5.9-10.8,13.7-13.9,23.6
        c-1.2,3.6-1.8,7.5-1.9,11.6c-0.1,4.1,0.3,8.2,1.2,12.3c0.9,4.1,2.2,8,4,11.7c1.8,3.7,4,7,6.5,9.8c4.1,4.7,8.6,8.4,13.3,11.3
        C811.8,205.8,817.3,207.9,823.6,209.4z" />
                    <path class="st0" d="M952.6,215c-5.5-0.8-10.7-2.3-15.6-4.6c-4.9-2.3-9.4-5.1-13.5-8.5c-4.1-3.4-7.6-7.4-10.6-11.9
        c-3-4.5-5.2-9.5-6.7-15c0-0.3-0.2-1.2-0.5-2.7c-0.3-1.5-0.6-2.6-0.9-3.3c0-0.1,0-0.3-0.1-0.6c-0.1-0.3-0.1-0.5-0.1-0.8
        c-0.1-0.4-0.2-0.8-0.2-1.2v-58.8h5v56.8c0,2.3,0.5,4.9,1.4,7.8c0.9,2.9,1.9,5.5,2.8,7.8c3.1,6.7,7.4,12.4,12.9,17.1
        c5.5,4.7,11.6,8.2,18.3,10.4c6.7,2.2,13.6,3,20.8,2.4s14-2.9,20.4-6.9c2.9-1.9,5.8-4.2,8.7-6.9c2.9-2.7,5.5-5.8,7.8-9.1
        c2.3-3.3,4.2-6.8,5.7-10.4c1.5-3.6,2.2-7.2,2.2-10.8l0.8-59.2h4.6v106.6h-5v-29c-3.2,5.3-6.9,10.1-11,14.3
        c-4.1,4.2-8.6,7.7-13.5,10.4c-4.9,2.7-10.1,4.7-15.8,5.8C964.8,215.8,958.8,215.9,952.6,215z" />
                    <path class="st0" d="M1041.4,47.2v14.6h-4.6V47.2H1041.4z M1041.4,107.2v106h-4.6v-106H1041.4z" />
                    <path class="st0" d="M1068,107.2v28.4l0.6-0.4c2.5-3.7,4.9-7.2,7.1-10.4c2.2-3.2,5.2-6.1,8.9-8.8c6.4-4.9,13.5-8.3,21.4-10
        c7.9-1.7,15.6-1.9,23.2-0.5c7.6,1.4,14.7,4.3,21.4,8.7c6.7,4.4,12,10.2,16,17.4c2.1,3.6,4,7.5,5.5,11.7c1.5,4.2,2.3,8.4,2.3,12.5
        v57.4h-4.6v-55c0-3.7-0.7-7.6-2-11.7c-1.3-4.1-2.9-7.7-4.8-10.9c-3.2-5.6-7.1-10.3-11.6-14.1c-4.5-3.8-9.5-6.7-14.9-8.7
        c-5.4-2-11-3.1-16.7-3.2c-5.7-0.1-11.3,0.7-16.7,2.4c-5.4,1.7-10.5,4.4-15.3,8c-4.8,3.6-8.9,8.2-12.4,13.8
        c-1.9,3.2-3.6,6.8-5.1,10.9c-1.5,4.1-2.3,8-2.3,11.7v56.8h-5v-106H1068z" />
                </g>
            </svg>

        </div>
    </div>

CSS

#logo_home
    position: absolute
    top: 30%
    left: 50%
    margin: 0
    transform: translate(-50%, -50%)
    width: 50%

path
    stroke: #ffffff
    fill: #ffffff
    stroke-dasharray: 615
    opacity: 10
    //animation-play-state: paused
    animation: animate 3s cubic-bezier(0, 0.23, 1, 0.1) paused


@keyframes animate
    0%
        opacity: 0
        fill: none
        stroke-dashoffset: 615
    30%
        opacity: 10
        fill: none
        stroke-dashoffset: 615
    90%
        fill: rgba(255, 255, 255, 0)
    100%
        opacity: 10
        fill: rgba(255, 255, 255, 1)
        stroke-dashoffset: 0

JAVASCRIPT / JQuery

$(function () {
    toggleSliders();
    setTimeout(() => {
        $("path").css("animation-play-state", "running");
    }, 3000);

........

Answer 1

решил это, проблема была в штрих-смещении, которое не имело хорошего значения. поворот на 915 решил проблему. в видео, которое я видел, они установили значение, просто изменив значение вручную и судя по глазу. правильное значение может быть получено с помощью JavaScript. Я сделал это так:

var paths = document.getElementsByTagName('path');
        var total = 0;
        for (i = 0; i < paths.length; i++) {
            if(paths[i].getTotalLength() > total){
                total = paths[i].getTotalLength();
            }
        }

таким образом, я нашел самый длинный путь, который был 915.1467895507812. значение 915 работало просто отлично.

надеюсь, это кому-нибудь поможет!