How can I give my SVG icon crown a gold linear-gradient fill (path) color?

Question

My naive approach did not work:

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

Does this answer your question? [SVG gradient using CSS](https://stackoverflow.com/questions/14051351/svg-gradient-using-css) — Simone Rossaini, Jun 22 '20 at 07:02
thank you @SimoneRossaini, I've already seen it, it is with `rect` not with `path`, therefore unfortunately no,.. — Lonely, Jun 22 '20 at 07:12

score 2 · Accepted Answer · answered Jun 22 '20 at 07:03

2

The CSS property value linear-gradient() seems only to be applicable for HTML elements and not for SVG. Citing MDN on this:

Don't be confused with CSS linear-gradient() as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.

As a solution, convert your gradient to a <linear-gradient> element as follows:

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

answered Jun 22 '20 at 07:03

Sirko

69,531
19
142
174

it works as naked HTML/CSS, within an SCSS file it doesn't make any effect, I'm a little bit confused,.. – Lonely Jun 22 '20 at 07:21
Is SCSS maybe trying to resolve the `url()` value? Also in your original code there was some strange invisible character in the second selector. Maybe that messes things up. – Sirko Jun 22 '20 at 07:31
it works only within path, in my case (= id-prefix): ` – Lonely Jun 22 '20 at 08:03
Btw: How can I add something like "text-shadow" for this crown? Many thanks,.. – Lonely Jun 22 '20 at 08:04
1

https://stackoverflow.com/a/6094674/1169798 – Sirko Jun 22 '20 at 08:20

How can I give my SVG icon crown a gold linear-gradient fill (path) color?

1 Answers1