如何给我的 SVG 图标冠上金色的线性渐变填充（路径）颜色？ [复制]

Posted 2023-03-06

【中文标题】如何给我的 SVG 图标冠上金色的线性渐变填充（路径）颜色？ [复制]

【英文标题】：How can I give my SVG icon crown a gold linear-gradient fill (path) color? [duplicate]

【发布时间】：2020-10-11 23:46:42

【问题描述】：

我幼稚的方法没有奏效：

.cIcon 
  width: 48px;
  height: 48px;


#idCrown path 
  fill: linear-gradient(120deg, #e2ad27, #daa520);

<svg id="idCrown" class="cIcon" viewBox="0 0 24 24">
  <path
    d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"
  />
</svg>

【问题讨论】：

这能回答你的问题吗？ SVG gradient using CSS

谢谢@SimoneRossaini，我已经看过了，它是rect 而不是path，因此很遗憾没有，..

如何从接受的答案中看出是相同的逻辑；）

你说得对，可能是我的SCSS惹了麻烦

【参考方案1】：

CSS 属性值linear-gradient() 似乎只适用于 html 元素而不适用于 SVG。 Citing MDN on this:

不要与 CSS linear-gradient() 混淆，因为 CSS 渐变只能应用于 HTML 元素，而 SVG 渐变只能应用于 SVG 元素。

作为一种解决方案，将渐变转换为<linear-gradient> 元素，如下所示：

.cIcon 
  width: 48px;
  height: 48px;


#idCrown path 
  fill: url(#gradientCrown);

<svg id="idCrown" class="cIcon" viewBox="0 0 24 24">
  <linearGradient id="gradientCrown" gradientTransform="rotate(120)">
    <stop offset="0%"   stop-color="#e2ad27" />
    <stop offset="100%" stop-color="#daa520" />
  </linearGradient>
  <path
    d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"
  />
</svg>

【讨论】：

它作为裸 HTML/CSS 工作，在 SCSS 文件中它没有任何效果，我有点困惑，..

SCSS 是否可能试图解析 url() 值？同样在您的原始代码中，第二个选择器中有一些奇怪的不可见字符。也许这会把事情搞砸。

它仅在路径中有效，在我的情况下（= id-prefix）：<path fill="url(#idGradientCrown)"..

顺便说一句：我怎样才能为这个皇冠添加类似“text-shadow”的东西？非常感谢，..

***.com/a/6094674/1169798