Перезапустить фоновую анимацию SVG

Как сказал @netsurfer, я решил эту проблему, используя файл object. Вот пример:

<object type="image/svg+xml" data="my.svg"></object>

Каждый раз, когда я динамически вставляю SVG object, анимация начинается с самого начала.

Я думаю, что ваше предположение «... поскольку изображение не считается перезагруженным браузером - он использует версию в памяти, которая уже анимируется», верно, поскольку файл SVG кэшируется! Таким образом, без (настоящей) «перезагрузки» анимация не запускается (снова).

Ну, во-первых, давайте посмотрим на анимацию SVG. Внутри элемента анимации можно использовать два атрибута, которые используются для повторения анимации — см. Повторяющиеся анимации и Элемент 'animate' . В вашем случае анимация запускается только один раз (без повторения).

Таким образом, вам понадобится Javascript, чтобы как-то «запустить» анимацию.
В принципе это возможно (пример: Расширенные методы анимации SVG), но только в том случае, если файл SVG является частью модели DOM, доступ к которой можно получить через Javascript. Поэтому вы должны включить файл SVG как <object>.

Как только вы используете файл SVG в теге <img> или в качестве CSS background-image, у вас нет доступа к файлу с помощью сценария.

Таким образом, единственный способ, который я мог придумать для достижения вашей цели, — запретить браузеру кэшировать файл SVG (см. Как (и как нельзя) управлять кешем) или использовать файл SVG в элементе <object>, чтобы можно было управлять анимацией через Javascript.

Кстати: ответ luigifab не так уж и плох. Это часто используемый «трюк» для принудительной перезагрузки файла/изображения — см. Трюк с кэшем< /а>

Можно изменить URL-адрес изображения, чтобы принудительно перезагрузить браузер.

Реализация для ответа luigifab. поместите немного random things в конце параметра URL, это заставит браузер думать, что ресурс является «новым ресурсом». Демо

Это сработало для меня, просто добавив и удалив класс «play» в элемент div, добавив setTimeout для задержки classList.add('play'), чтобы класс можно было удалить, а затем применить

CSS

@keyframes play60 {
        0% {
            background-position: 0px 0px;
        }
        100% {
            background-position: -38400px 0px;
        }
    }
    .shapeshifter {
        animation-duration: 1000ms;
        animation-timing-function: steps(60);
        animation-fill-mode: forwards;
        width: 640px;
        height: 640px;
        background-repeat: no-repeat;
    }
    .shapeshifter.play {
        animation-name: play60;
    }

JS:

document.getElementById('shape').addEventListener('mouseover', () => {
    document.getElementById('shape').classList.remove('play')
    setTimeout(() => {
        document.getElementById('shape').classList.add('play');
    }, 1)
})

HTML

<div class="shapeshifter " id="shape" style="background-image: url(shape.svg)"></div>

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

url + "&" + Math.random()

Демо без перезагрузки с постоянным URL: http://jsfiddle.net/4ZBLr/8/

Перезагрузить демонстрацию со случайным URL-адресом: http://jsfiddle.net/4ZBLr/9/

Я думаю, что во многих случаях setCurrentTime(0) является лучшим решением, если оно поддерживается браузером. Вот пример (при условии, что вы используете тег <object> для встраивания, конечно):

let content = document.getElementById("object-id").contentDocument;
let svg = content.getElementsByTagName("svg")[0];
if(svg.getCurrentTime() > 10)
  svg.setCurrentTime(0);

Дополнительную информацию о соответствующем API можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement