Custom link arrow element with animation resets when zooming

[Zambiorix]

Describe your problem

I have added a custom link arrow element with an infinite rotation animation attached to it via css.
This works as expected.
But I have noticed that whenever I zoom the panorama in/out, the animation resets to its first frame, which shows as a stutter.
Any idea why that is and how I can avoid it?

Thanks!

Online demo URL

No response

Photo Sphere Viewer version

5.11.0

Plugins loaded

No response

Additional context

No response

[mistic100]

Please share some code

[Zambiorix]

The animation is embedded in my svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" 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/" class="link-01" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <style>
    @keyframes link-01-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }}
    .link-01:hover .link-01-outer {
        stroke-opacity: 1.0;
    }
    .link-01-inner {
        fill: white;
        fill-opacity: 0.8;
    }
    .link-01-outer {
        fill:none;
        stroke:white;
        stroke-opacity:0.8;
        stroke-width:10px;
        stroke-dasharray:20;
        animation: link-01-rotate 20s infinite linear;
    }
    </style>
    <g transform="translate(50,50)">
        <circle cx="0" cy="0" r="45" class="link-01-outer link-outer"/>
        <circle cx="0" cy="0" r="30" class="link-01-inner link-inner"/>
    </g>
</svg>

When my view loads, I create all nodes and and add them to the tour.
In node creation, I will create a custom arrow element.

                arrowStyle: {

                    element: createArrow(data),

Here a div element is returned and in the background a svg is loaded and attached

function createArrow (data) {

    const container = document.createElement('div')

    container.classList.add(data.isEntry ? 'link-entry' : 'link')

    const loader = data.isEntry ? linkEntry : linksExit[data.default().linkName] || linksExit.link01

    loader.load().then((result) => {

        const parser = new DOMParser()

        const svgDoc = parser.parseFromString(result.default, 'image/svg+xml')

        const svg = svgDoc.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg').item(0)

        container.appendChild(svg)

    }).catch(() => { })

    return container
}

As said, the animation works ..

But as soon as I change the zoomLevel, the animation resets to first frame .. this looks like stuttering.