SVG文本上的线性渐变问题

Question

SVG文本上的线性渐变问题

4

我想要在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文本，我们能否使用linear-gradient代替？

- RTC222

我可以清楚地看到这些字母... 您不明白问题在哪里吗？ - Lazar Nikolic

我有两个不同的显示器，但是在任何一个上都看不到文本。如果我在类定义中使用fill: rgb(71,164,71)，我可以看到文本，但是不能使用渐变代码。 - RTC222

页面的背景色是黑色的；当我将其切换为白色时，可以看到文本，但没有渐变效果。 - RTC222

这些是 CSS 中的拼写错误 (fill=... 样式) 还是作者的概念错误？ - mrReiha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

请尝试这个：

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