Проблема с линейным градиентом на текст SVG

Question

Я пытаюсь поместить линейный градиент в текст SVG, но я не уверен, как указать цвет заливки в текстовом классе. Узнав, как это сделать, я нашел пример в Интернете, поэтому использую его, но там, где я указываю цвет заливки для текста (в классе sfp2, определенном ниже), я поместил fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/> но текст больше не отображается на экране вообще.

<div class="logo">
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%"  stop-color="green"/>
        <stop offset="95%" stop-color="gold"/>
    </linearGradient>
</defs>

  <style>

    .sfp2 {
        font-family: CamphorW01-Regular, sans-serif;
        font-size: 7px;
        /*fill: rgb(71,164,71);*/
        fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>
}

    .sfp9 {
        font-family: CamphorW01-Thin, sans-serif;
        font-size: 25px;
        fill: rgb(117,163,126);
        kerning="40";
    }

  </style>

  <text x="0" y="25" class="sfp9" kerning="40">MainLogo</text>
  <text x="24" y="33" class="sfp2">Tag Line</text>

</svg>
</div>

Мои вопросы: что я делаю не так в классе sfp2, и можем ли мы вместо этого использовать линейный градиент, когда это текст svg?

Answer 1

Пожалуйста, попробуйте это:

<div class="logo">
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%"  stop-color="green"/>
        <stop offset="95%" stop-color="gold"/>
    </linearGradient>
</defs>

  <style>

    .sfp2 {
        font-family: CamphorW01-Regular, sans-serif;
        font-size: 7px;
        /*fill: rgb(71,164,71);*/
        fill:url(#MyGradient);
}

    .sfp9 {
        font-family: CamphorW01-Thin, sans-serif;
        font-size: 25px;
        fill: rgb(117,163,126);
        kerning="40";
    }

  </style>

  <text x="0" y="25" class="sfp9" kerning="40">MainLogo</text>
  <text id="test"  x="24" y="33" class="sfp2">Tag Line</text>

</svg>
</div>