Search code examples
csssvgradial-gradients

Radial gradient for svg

I want to fill svg with radial gradient but unfortunately it doesn't work. What kind of mistake I have done? 

<body>
  <svg style="display:none">
    <defs>
        <radialGradient id="RadialGradient1">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="blue"/>
        </radialGradient>
        <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
            <stop offset="0%" stop-color="red"/>
            <stop offset="100%" stop-color="blue"/>
        </radialGradient>
    </defs>
    <symbol viewBox="0 0 200 200" id="img--svg--icon">
        <path d="M 100, 100
             m -75, 0
             a 75,75 0 1,0 150,0
             a 75,75 0 1,0 -150,0"/>
    </symbol>
</svg>


  <section class="item item--two">
    <svg width="47" height="21" class="item__icon" fill="url(#RadialGradient1)">
                    <use xlink:href="#img--svg--icon"></use>
                </svg>
    <p class="item__descr">Гипогликемия</p>
  </section>

Solution

  • You can use width and height set to 0, instead of display: none.

    Display: none will be otherwise transferred to your target svg.

    <svg width="0" height="0">
  <defs>
  ... your gradients here
  </defs>
</svg>

<section class="item item--two">
  <svg width="47" height="21" class="item__icon" fill="url(#RadialGradient1)">
    <use xlink:href="#img--svg--icon"></use>
  </svg>
  <p class="item__descr">Гипогликемия</p>
</section>