svg 文本上的线性渐变问题

Issue with linear gradient on svg text

提问人：RTC222 提问时间：9/17/2018 最后编辑：Lazar NikolicRTC222 更新时间：9/18/2018 访问量：1978

问：

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

css svg css渐变

评论

0赞 Lazar Nikolic 9/17/2018
我看到字母很好......没有看到问题？
0赞 RTC222 9/17/2018
我有两台不同的显示器，但两台显示器上都看不到文字。如果我在 def 类中使用 fill： rgb（71,164,71），我可以看到文本，但看不到渐变代码。
0赞 RTC222 9/17/2018
身体背景颜色为黑色;当我将其切换到白色时，我看到了文本，但没有渐变。
0赞 mrReiha 12/17/2018
这些是错别字（CSS中的样式）还是作者的错误概念？fill=...

答：

4赞 enxaneta 9/17/2018 #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>

评论

0赞 RTC222 9/17/2018
是的，这就是它的工作原理：<text width=“24” height=“33” fill=“url（#MyGradient）” x=“24” y=“33” width=“33” height=“24” class=“sfp2”>Tag Line</text>。非常感谢。
2赞 Paul LeBeau 9/18/2018
这个答案的序言是完全无关紧要的。这个答案之所以有效，是因为它现在在 CSS 中有一个有效的规则。OPs 原始示例中的那个是无效的，因为它有额外的内容（' x=“10” y=“10” width=“100” height=“100”' 部分）。此外，该元素没有 和 属性。fill<linearGradient>xy
1赞 enxaneta 9/18/2018
@PaulLeBeau我同意。我已经编辑了我的答案以删除错误。

上一个：从源代码构建 Python 时为 ./configure 使用哪些标志

下一个：如何自动将大量文本格式化为 html？