Question

我想用径向渐变填充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>

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

svg的径向渐变

1 个答案: