如何为细图标添加渐变？

开发
1

我试了一切办法，但无法在图标上应用渐变，就像这里的一样

image
image1920×1080 174 KB

2

我试过了一切办法，但还是无法改变 :frowning:

3 
.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {

1. background-image: linear-gradient(to right, #4c6c81, #083263);

}

image
image526×116 4.8 KB

.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {

1. color: red;

}

image
image506×142 2.18 KB

4

您好，

根据我在 Gradients in SVG - SVG | MDN 上的阅读，您需要在 SVG 中添加 <linearGradient>。

其他资源：

您可以做的是在您的 主题/组件 中创建一个隐藏的 SVG 来定义您的渐变：

<svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;">
  <linearGradient id="my-gradient-1" x2="0" y2="1">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
  </linearGradient>
  
  <linearGradient id="my-gradient-2">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
    <stop offset="100%" stop-color="var(--color-stop-3)" />
  </linearGradient>

  <!-- 根据需要使用唯一的 ID 定义特定的渐变 -->
</svg>

然后，在您的 CSS 中，您定义颜色，并定位您想要 fill 的 SVG 元素：

/* 定义渐变颜色 */
#my-gradient-1 {
    --color-stop-1: #a770ef;
    --color-stop-2: #eda58b;
}

#my-gradient-2 {
    --color-stop-1: #2980b9;
    --color-stop-2: #6dd5fa;
    --color-stop-3: #ffffff;
}

.svg-icon, .svg-icon-title {
    /* 目标是所有 svg 图标 */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* 仅目标是聊天图标 */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

注意：fill 的第二个值是备用颜色。

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

我没有进行广泛的测试；这是一个如何自定义的示例。
随时查阅文档以创建更复杂的渐变。

希望这对您有帮助！

2 个赞
5

您好，一切都还好吗？非常感谢您的回复。
我之前尝试过一次这种方法，但没有完全理解（尤其是因为我不懂英语），而且它不起作用。我尝试了您展示给我的方法，这次图标确实改变了，但它们没有变成渐变色，只是变成了灰色。好吧，让我澄清一下这些疑问，看看是不是我哪里弄错了。您保存的文本文件的名称是什么？您上传主题时使用的名称是什么？您把 CSS 放在哪里了，是放在桌面 CSS 部分吗？

image
image967×677 14.5 KB

6

我通过管理面板中的“自定义”->“主题”编辑了我的主题 CSS/HTML。

  1. 请在此处编辑您的主题或创建一个主题组件，方法是遵循 Beginner's guide to using Discourse Themes

  2. 点击“编辑 CSS/HTML”

  3. 在“Body”选项卡中，放入 SVG 代码
    在“Common”选项卡中，放入 CSS

image
image537×376 16.4 KB

image
image474×414 13.1 KB

1 个赞
7

我在这方面遇到了很多麻烦，问题在于我放它的方式，哈哈，非常感谢您教我如何将其放在正确的位置，我将永远感激您的帮助，非常感谢。

1 个赞