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

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

Пример: Codepen
  • Вопрос задан
  • 211 просмотров
Решения вопроса 1
SuperToster
@SuperToster
Найдите в коде иконок
id="Instagram_2_"
и
fill="url(#Instagram_2_)"

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

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

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

Войти через центр авторизации
Похожие вопросы