title: React.js - use svg linear gradient not working
body: <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>