Задать вопрос

Почему не отображается svg с градиентом если на странице два таких элемента и один из них лежит в родителе, который скрыт?

Мне нужно вставить несколько одинаковых svg на страницу, один из них вложить в div, этот div скрыть через display:none Проблема в том, что если я прописываю display:none, перестают отображаться все одинаковые svg на странице Эта проблема появляется только если у svg есть градиент Почему так происходит? Можно ли как-то это обойти?

Пример: Codepen
  • Вопрос задан
  • 261 просмотр
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
SuperToster
@SuperToster
Найдите в коде иконок
id="Instagram_2_"
и
fill="url(#Instagram_2_)"

В коде первой иконки переименуйте пару id и fill из Instagram_2_ например в Instagram_2_ONE
В коде второй иконки переименуйте пару id и fill из Instagram_2_ например в Instagram_2_TWO

Вообще, чтобы так не мучиться, лучше пользоваться спрайтами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы