React.js - use svg linear gradient not working
<p>I have a circle and a gradient to fill in it,
I put in  the gradient and call him in path by style fill.</p>
<pre><code>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 (
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlnsXlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 983.4 983.4&quot;&gt;
  &lt;g&gt;
   &lt;linearGradient id=&quot;linear-gradient&quot; gradientUnits=&quot;userSpaceOnUse&quot; x1=&quot;1041.6901&quot; y1=&quot;169.485&quot; x2=&quot;1383.9301&quot; y2=&quot;169.485&quot; gradientTransform=&quot;matrix(1 0 0 -1 -761.14 398.97)&quot;&gt;
          &lt;stop offset=&quot;0.14&quot; stop-color=&quot;#2f343b&quot; stop-opacity=&quot;0&quot;/&gt;
          &lt;stop offset=&quot;0.43&quot; stop-color=&quot;#337082&quot; stop-opacity=&quot;0.41&quot;/&gt;
          &lt;stop offset=&quot;0.67&quot; stop-color=&quot;#369fb9&quot; stop-opacity=&quot;0.73&quot;/&gt;
          &lt;stop offset=&quot;0.79&quot; stop-color=&quot;#37b1cf&quot; stop-opacity=&quot;0.85&quot;/&gt;
        &lt;/linearGradient&gt;
        &lt;path id=&quot;gradient&quot; style={{fill:'url(#linear-gradient)'}} className=&quot;cls-200&quot; d=&quot;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&quot;&gt;
&lt;/g&gt;
&lt;/svg&gt;
</code></pre>
<p>it's not working, any suggestions?</p>