score:26

Accepted answer

In react the attributes form of linear gradient are a bit different and supposed to be like this:

<linearGradient
    id="linear-gradient"
    gradientUnits="userSpaceOnUse"
    x1="1041.6901"
    y1="169.485"
    x2="1383.9301"
    y2="169.485"
    gradientTransform="matrix(1 0 0 -1 -761.14 398.97)"
>
    <stop offset="14%" stopColor="#2f343b" stopOpacity="0%" />
    <stop offset="43%" stopColor="#337082" stopOpacity="41%" />
    <stop offset="67%" stopColor="#369fb9" stopOpacity="73%" />
    <stop offset="79%" stopColor="#37b1cf" stopOpacity="85%" />
</linearGradient>

It mean that the syntax should be from stop-color => stopColor

offset should be in percentage

ReactJs + svg

score:0

Might not be entirely useful but if you have load more than one SVG, ensure the linearGradient id is unique. In my case before, both linearGradient id is id="linear-gradient" , thus the 2nd SVG is actually following the 1st SVG gradient.

score:1

For anyone passing by: another reason for a gradient not working is if its ID contains non-ASCII caracters (like "é"). Happened to me because Adobe Xd was exporting it with ID "Dégradé_par_defaut", which means default_gradient in french :)

score:6

For others coming here later, style={{fill:'url(#linear-gradient)'}} is unnecessary for just one or a mere few styles. Instead, simplify to fill="url(#linear-gradient)". The same applies to other common SVG styling like stroke="url()".


Related Query

More Query from same tag