svg文本上的线性渐变问题答案

【问题标题】：Issue with linear gradient on svg textsvg文本上的线性渐变问题
【发布时间】：2019-02-20 17:24:21
【问题描述】：

我正在尝试在 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 文本时我们可以使用线性渐变吗？

【问题讨论】：

我看到字母就好了...没看到问题？
我有两个不同的显示器，但我都看不到任何文字。如果我在类 def 中使用 fill: rgb(71,164,71) 我可以看到文本，但看不到渐变代码。
正文背景颜色为黑色；当我将其切换为白色时，我看到了文字，但没有渐变。
是那些错字（CSS 中的 fill=... 样式）还是作者的概念有误？

标签： css svg css-gradients

【解决方案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>

【讨论】：

是的，这就是它的工作原理：标签行。非常感谢。
这个答案的序言完全无关紧要。这个答案有效，因为它现在在 CSS 中有一个有效的 fill 规则。 OPs 原始示例中的那个是无效的，因为它有额外的内容（`x="10" y="10" width="100" height="100"` 部分）。此外，<linearGradient> 元素没有 x 和 y 属性。
@PaulLeBeau 我同意。我已编辑我的答案以消除错误。