Why is svg with a gradient not displayed if there are two such elements on the page and one of them lies in the parent, which is hidden?

Question

css

I need to insert several identical svgs on the page, put one of them in a div, hide this div through display:none The problem is that if I set display:none, all identical svgs on the page stop showing This problem only appears if the svg has Gradient Why is this happening? Whether it is possible to bypass it somehow?

Example: codepen

Answer 1

Find in the code of the icons
id="Instagram_2_"
and
fill="url(#Instagram_2_)"
In the code of the first icon, rename the id and fill pair from Instagram_2_, for example, to Instagram_2_ONE
In the code of the second icon, rename the pair of id and fill from Instagram_2_, for example, to Instagram_2_TWO
In general, in order not to suffer like this, it is better to use sprites.

Answer 2

Make a 301 redirect from the old URLs to the new URLs. To do this, you can use plugins (for example, seo redirect or something like that), or you can manually write it in htaccess