Answer the question
In order to leave comments, you need to log in
Why aren't icons with a gradient from the SVG sprite displayed?
Colleagues, good afternoon.
I ask you to help solve the issue of displaying icons from a sprite with a gradient.
SUBJECT: There is a site where some of the icons are called from a sprite file, and some are inlined. I can't get them to draw properly from the sprite. Site
There is actually a sprite file, where all the icons are filled in the same way through the symbol. Sprite file
It has an icon with id=star, it has a gradient.
PROBLEM: when I call it in the markup, I see that the icon is rendered, but its fill is not. Those. it is simply not visible on the page in any browser. This is despite the fact that even more complex icons are calmly rendered and visible.
How do I call the icon:
<svg viewBox="0 0 100 100">
<use xlink:href="/img/icon/sprite.svg#star"></use>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
<symbol viewBox="0 0 100 100" id="star">
<path d="M100 50c0 27.614-22.386 50-50 50S0 77.614 0 50 22.386 0 50 0s50 22.386 50 50z" fill="url(#0_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.794 21.773l7.195 20.687h20.084l-16.36 12.724 7.288 21.865-18.207-13.656-18.208 13.656 7.288-21.865-16.36-12.724h20.084l7.196-20.687zm0 7.248L45.29 44.84H30.454l12.212 9.498-5.41 16.231 13.538-10.153L64.332 70.57l-5.41-16.23 12.212-9.499H56.296l-5.503-15.82z" fill="url(#1_linear)"/>
<defs>
<linearGradient id="0_linear" x1="47.246" y1="112.859" x2="124.114" y2="17.489" gradientUnits="userSpaceOnUse"><stop stop-color="#EEE8FF"/>
<stop offset="0" stop-color="#EEE8FF"/>
<stop offset="1" stop-color="#FFF5FF"/>
</linearGradient>
<linearGradient id="1_linear" x1="49.291" y1="84.156" x2="91.895" y2="31.984" gradientUnits="userSpaceOnUse">
<stop stop-color="#A046FF"/><stop offset="1" stop-color="#FF00FB"/>
</linearGradient>
</defs>
</symbol>
</svg>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question