SVG анимация

Сорри за выбранную категорию, но соответствующей я не нашел.

Создал тривиальную полосу загрузки для прелоадера главной страницы в SVG формате. Проблема в том, что при обновлении страницы (в клиент-серверном режиме) анимация SVG не сбрасывается (полоса загрузки всегда на 100%). Страница никак не кэшируется. При локальном открытии файла в браузере - всё ОК. В чем может быть проблема?

 

а не проще ее сверстать? и добавить анимацию ?
попробуйте сверстать, наприм.
<div class="bar"><div class="progress"></div></div>
.bar{
width:300px;
border:1px solid #eee;
padding:5px;
border-radius:4px ;
height:30px;
}
.progress{
width:150px;
background:#333;
border-radius:4px;
height:20px;
}

 

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

Для решения этой проблемы можно добавить случайную строку к URL файла SVG при каждом обновлении страницы. Таким образом, браузер будет загружать новую версию файла, и анимация будет начинаться с начала.

Например, вы можете добавить случайный параметр timestamp к URL файла SVG следующим образом:

PHP:

<object type="image/svg+xml" data="path/to/your/file.svg?timestamp=<?php echo time(); ?>"></object>

Здесь мы используем функцию time() для генерации случайного числа, которое добавляется к URL файла SVG в качестве параметра timestamp.

Также можно использовать любую другую функцию для генерации случайных строк, например, uniqid():

PHP:

<object type="image/svg+xml" data="path/to/your/file.svg?timestamp=<?php echo uniqid(); ?>"></object>

Это должно решить проблему с анимацией SVG при обновлении страницы.