1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

SVG анимация

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Asakrua, 27 окт 2015.

Метки:
  1. Asakrua

    Asakrua

    Регистрация:
    27 окт 2015
    Сообщения:
    1
    Симпатии:
    0
    Сорри за выбранную категорию, но соответствующей я не нашел.

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

    Marrie

    Регистрация:
    7 сен 2015
    Сообщения:
    51
    Симпатии:
    10
    а не проще ее сверстать? и добавить анимацию ?
    попробуйте сверстать, наприм.
    <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;
    }
     
    Последнее редактирование: 29 окт 2015
  3. SinTaksiS-11

    SinTaksiS-11

    Регистрация:
    10 апр 2023
    Сообщения:
    12
    Симпатии:
    1
    Проблема, скорее всего, связана с тем, что при обновлении страницы браузер загружает новую версию 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 при обновлении страницы.