Изменение стилей svg спрайта

Question

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

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

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

Answer 1

Из вашего примера непонятно как вы на него ссылаетесь, но... если это делать в размере одной страницы, то... вашему 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>

Answer 2

У вас там такая, извините, "каша", что сам чёрт ногу сломит. На "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>

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

БЛОГ НА HUSL

Изменение стилей svg спрайта

Ответы (2 шт):