SVG-анимация запускается только тогда, когда я открываю инструменты разработки браузера

Question

Когда я вставляю в HTML элемент div с анимированным изображением SVG, анимация запускается только в том случае, если я открываю инструменты разработки, интегрированные с браузером.

$("#myDiv").html('<div class="" style="image-rendering: auto;"><img src="/img/loading-spinner.svg"></div>');

Я использую Chrome версии 119.0.6045.161 (официальная сборка) (64-разрядная версия).

_{Свободный перевод вопроса SVG animation only starts when I open the browser's development tools от участника @Koba.}

Answer 1

Я загрузил созданный мною анимированный SVG и реализовал его в коде, который вы добавили в вопросе. Анимация SVG работает, и ее можно увидеть во фрагменте ниже.

Вот код моего svg файла:

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="175px" version="1.1">
    <style>
        svg {
            width: 300px;
            display: block;
            position: absolute;
        }
        svg .line1 {
            stroke-dasharray: 340;
            stroke-dashoffset: 40;
            animation: dash 1.5s linear alternate infinite;
        }
        svg .line2 {
            stroke-dasharray: 320;
            stroke-dashoffset: 320;
            animation: dash2 1.5s linear alternate infinite;
        }
        @keyframes dash {
            from {
                stroke-dashoffset: 360;
            }
            to {
                stroke-dashoffset: 40;
            }
        }
        @keyframes dash2 {
            from {
                stroke-dashoffset: 280;
            }
            to {
                stroke-dashoffset: -40;
            }
        }
    </style>
    <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" 
    class="path"></path>
    <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"
        class="line2"></path>
    <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"
       class="line1"></path>
</svg>

Я предполагаю, что причиной проблемы является ваш SVG-файл, а не код, который вы здесь используете.

$("#myDiv").html('<div class="" style="image-rendering: auto;"><img src="https://svgur.com/i/10G_.svg"></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv"></div>

Перевод комментария автора вопроса @Koba
Ты прав! Элемент div, загруженный в плоский HTML, работает. Однако когда я загружаю div внутри скрытого Offcanvas Bootstrap 5, который затем отображается программно, анимация не запускается.

_{Свободный перевод ответа от участника @Nick Friesen.}

БЛОГ НА HUSL

SVG-анимация запускается только тогда, когда я открываю инструменты разработки браузера

Ответы (1 шт):