A colorful SVG in plain HTML is all black in React. Why?
<p>I'm using React in Meteor.</p>

<p>When I add an SVG to the React component, style is not applied. But the very same code is working as expected in a plain HTML.</p>

<p>Here is my SVG code:</p>

<pre><code>&lt;svg viewBox="0 0 1031 475" preserveAspectRatio="none"&gt;
  &lt;defs&gt;
    &lt;linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient"&gt;
      &lt;stop stop-color="#00D7B9" offset="0%"/&gt;
      &lt;stop stop-color="#B95DD7" offset="50%"/&gt;
      &lt;stop stop-color="#FFB367" offset="100%"/&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
    fill="url(#front-rainbow-gradient)" fill-opacity="0.65" /&gt;
&lt;/svg&gt;
</code></pre>

<p>The React component:</p>

<pre><code>render () {
  return (
    &lt;div&gt;
      &lt;div className="main-header"&gt;
        &lt;svg viewBox="0 0 1031 475" preserveAspectRatio="none"&gt;
          &lt;defs&gt;
            &lt;linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient"&gt;
              &lt;stop stop-color="#00D7B9" offset="0%"/&gt;
              &lt;stop stop-color="#B95DD7" offset="50%"/&gt;
              &lt;stop stop-color="#FFB367" offset="100%"/&gt;
            &lt;/linearGradient&gt;
          &lt;/defs&gt;
          &lt;path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
            fill="url(#front-rainbow-gradient)" fill-opacity="0.65" /&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div className="latest"&gt;
      &lt;Container /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  )
  }
</code></pre>