Обновление:
По каким-то причинам это не срабатывает с JavaScript. Он не позволяет многократно устанавливать фоновое изображение. Для решения проблемы я назначил свойство backgroundPosition как calc(50% + смещение_x) calc(50% + смещение_y), вместо того чтобы применять трансформацию в изображении. Похоже, что это работает на данный момент.
Не получается динамически задать свойство “background-image” элемента при помощи JavaScript. Ранее у меня не возникало проблем с этим, но сейчас мой скрипт совершенно не работает. В консоли отсутствуют сообщения об ошибках, поэтому я не понимаю, что происходит.
Я создал векторные графики для игры и пытаюсь перемещать их по экрану с помощью группы (<g transform = "translate(x, y)"></g>). Мой код берет текущий фон элемента по element.style.backgroundImage и заменяет строку, содержащую группу, на трансформированную версию.
Когда я запускаю:
element.style.backgroundImage = "url(\"" + новыи_фон + "\")";
console.log(element.style.backgroundImage);
старая версия фонового изображения (без трансформаций) отображается в выводе, и изображение не обновляется. Например, вывод может быть:
… <svg xmlns='http://www.w3.org/2000/svg' width='3000' height='3000'><g> …
В то время как вывод
console.log(новыи_фон);
оказывается корректным и выглядит примерно так:
… <svg xmlns="http://www.w3.org/2000/svg" width="3000" height="3000"><g transform="translate(945.123, 1256.789)"> …
Фон элемента не изменяется, несмотря на мои усилия. Я попробовал все, что только возможно. Подозревал, что проблема может быть в цикле (с интервалом около 50 мс), но увеличение интервала не дало результата. Эта система работает в других частях скрипта, где фон задается изначально.
Буду признателен за любую информацию.