Радиальный градиент для SVG

Я хочу заполнить SVG радиальным градиентом, но, к сожалению, это не работает. Какую ошибку я совершил?

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

Источник

1 ответ

Решение

Вы можете использовать ширину и высоту, установленные на 0, вместо display: none,

Дисплей: ни один не будет передан в вашу цель 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>
Источник
Другие вопросы по тегам