React.js - use svg linear gradient not working

Question

I have a circle and a gradient to fill in it, I put in the gradient and call him in path by style fill.

import React,{PropTyoes} from 'react';
import {connect} from 'react-redux';  
import * as Actions from '../controllers/Actions';


export default class MyComp extends React.Component {
    constructor(props, context){
        super(props, context); 
    }
render(){ 
      return (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4">
  <g>
   <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="0.14" stop-color="#2f343b" stop-opacity="0"/>
          <stop offset="0.43" stop-color="#337082" stop-opacity="0.41"/>
          <stop offset="0.67" stop-color="#369fb9" stop-opacity="0.73"/>
          <stop offset="0.79" stop-color="#37b1cf" stop-opacity="0.85"/>
        </linearGradient>
        <path id="gradient" style={{fill:'url(#linear-gradient)'}} className="cls-200" d="M622.8,119.6C512.1,72,385.5,78.9,280.6,138.1l134.3,232.6c31.2-16.8,68.2-18.5,100.9-4.8    L622.8,119.6z">
</g>
</svg>

it's not working, any suggestions?

The gradient colour changes are not in the same location as the shape. — Robert Longson, Jun 22 '16 at 08:14
The gradient covers an area defined by x1, x2, y1 and y2 transformed by the gradientTransform. That area does not cover the shape's bounding box. — Robert Longson, Jun 22 '16 at 08:26
if i moved it from react component it's working great @RobertLongson — hod caspi, Jun 22 '16 at 08:27
It didn't when I tried it but OK. Is the react component generating a `` element? — Robert Longson, Jun 22 '16 at 08:28
Now that you've changed the question there's a gradient. So what's the question. You do know that the code in the question **must** demonstrate the problem you're having otherwise we can't help you as we don't know what the issue is. — Robert Longson, Jun 22 '16 at 08:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/115281/discussion-between-hod-caspi-and-robert-longson). — hod caspi, Jun 22 '16 at 08:34

score 33 · Accepted Answer · edited Apr 16 '21 at 10:03

33

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

edited Apr 16 '21 at 10:03

Penny Liu

15,447
5
79
98

answered Jun 26 '16 at 09:51

hod caspi

826
2
10
17

Why should offset be a percentage? – CWSites Jul 17 '19 at 18:35
This solved my issue with SVG linearGradients. I was using react-inlinesvg and this issue was not resolved by it. Had to convert the SVG to a component and do these fixes to make it work again. – Low Jul 19 '19 at 09:41
offset does not need to be a percentage – drichar Jul 24 '20 at 01:47

score 6 · Answer 2 · answered Apr 28 '18 at 11:47

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()".

answered Apr 28 '18 at 11:47

Alexander Apostolov

61
1
1

score 5 · Answer 3 · answered Apr 14 '22 at 07:29

5

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.

answered Apr 14 '22 at 07:29

iceiceicy

705
1
9
24

exaclty my problem ! thank you so much :) – Pierre Moreau Jan 10 '23 at 09:04
Also check "clip-path", can be also have the same id, like in another svg. – Andrey Patseiko Apr 25 '23 at 12:15

chriskaya · Answer 4 · 2021-11-08T13:22:34.587

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 :)

edited Nov 08 '21 at 13:22

answered Jun 24 '21 at 13:42

chriskaya

71
6

Thanks for saving my life. I had ":" in my gradients and they didn't work. – AlexTemina Oct 19 '21 at 11:36

React.js - use svg linear gradient not working

4 Answers4

Linked