1

Есть svg спрайт, который я хочу анимировать с помощью keyframes.

Когда я тестировал svg анимацию без спрайта — все работало. https://codepen.io/GRCR13/pen/KKeOweM (так он должен работать). После добавления в спрайт он отказывается работать.

              <svg  width="505px" height="505px">
                <use href="https://**/img/sprite.svg#sputnik"></use>
              </svg>

2 ответа 2

1

У вас там такая, извините, "каша", что сам чёрт ногу сломит. На "codepen" одно, на сайте другое.

Попробую объяснить на пальцах. Делаем три файла. Специально для ваших условий я кладу их по тем же путями и прописываю относительные пути: /404/error.html /css/error.css /img/demo.svg

Поехали 404/error.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>demo SVG</title>
    <link rel="stylesheet" href="../css/error.css">
</head>
<body>

    <!-- для стилизации такого способа внеднения требуется идентификатор или класс, пусть будет id="myDotUse" -->
    <svg>
        <use id="myDotUse" href="../img/demo.svg#myDot"></use>
    </svg>

    <!-- 
        в файле SVG потребуется первая! строка со ссылкой на внешнюю таблицу стилей
        и <use> находится прямо внутри SVG
    -->
    <object type="image/svg+xml" data="../img/demo.svg#myDot">
        <!--img на замену -->
    </object>

</body>
</html>

css/error.css

#myDot {
  animation: colorchange 3s infinite;
}

#myDotUse {
  animation: colorchange 3s infinite;
}

@keyframes colorchange {
  0% {
    fill: #1bacff;
  }
  50% {
    fill: black;
  }
  100% {
    fill: #1bacff;
  }
}

img/demo.svg

<?xml-stylesheet type="text/css" href="../css/error.css"?>

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </symbol>
  <use href="#myDot" x="5" y="5" style="opacity:1.0" />
</svg>

Попробуйте сами потыкать в код, поудалять и всякое такое. Думаю разберётесь где именно вы намудрили в своём.

2
  • Благодарю за ответ. Получилось! 2 недели не мог сделать из за <?xml-stylesheet type="text/css" href="../css/error.css"?>
    – GRCR13
    15 дек 2022 в 18:28
  • Как заставить работать svg спрайт (т.е. анимацию) на айфоне? Все перепробовал, но не работает 😢. Анимация не запускается абсолютно во всех браузерах на телефоне. Автопрефиксер не помог
    – GRCR13
    22 дек 2022 в 17:19
0

Из вашего примера непонятно как вы на него ссылаетесь, но... если это делать в размере одной страницы, то... вашему SVG не хватает id-шника к которому вы обращаетесь из спрайта.

Добавьте и, по крайней мере в размерах одной страницы у вас всё заработает.

<svg  xmlns="http://www.w3.org/2000/svg" id="sputnik" > 
  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

<br>  
<svg>
  <use href="#sputnik"></use>
</svg>

2
  • <svg width="505px" height="505px"> <use href="https://**/img/sprite.svg#SPUTNIK"></use> </svg> Слово sputnik является айдишником спарйта. Структура спарйта <svg xmlns="w3.org/2000/svg"> <symbol id="sputnik" и там path> </symbol> </svg>
    – GRCR13
    15 дек 2022 в 11:16
  • вот ссылка с реализацией [nexo.games/404/index.html] [nexo.games/img/sprite.svg#sputnik] тут нажать ctrl+u
    – GRCR13
    15 дек 2022 в 11:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.