P
P
Polina Emelyanova2020-12-31 13:29:53
HTML
Polina Emelyanova, 2020-12-31 13:29:53

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>


Her code in sprite

<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>


I ask colleagues to point out to me what I'm doing wrong. Thank you in advance!!!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question