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

Question

[Лев Пенкин]

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

Пример: Codepen

Comments

[Ankhena]

Сначала проверьте свой код валидатором. Это ответит на вопрос почему они пропадают. А также почему я рекомендую следующее:

Почитайте про спрайты css.yoksel.ru/svg-groups-use

И не нужно дублировать всю простыню svg.

Answer 1

[SuperToster]

Найдите в коде иконок
id="Instagram_2_"
и
fill="url(#Instagram_2_)"

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

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

Comments

[Лев Пенкин]

Спасибо!