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>