title: React SVG not rerendering on attribute update
body: <p>I'm updating an SVG filter attribute via a slider input control but it doesn't continuously update the rendered filter.</p>
  
  <p>Here is the working code: <a href="https://codepen.io/dgwyer/pen/EXmqrb" rel="noreferrer">https://codepen.io/dgwyer/pen/EXmqrb</a></p>
  
  <p>If I use <code>dangerouslySetInnerHTML</code> to set the filter then it works but this hack isn't good enough to use in production code?</p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { blur: 2 };
      this.blurChange = this.blurChange.bind(this);
    }
  
    blurChange(event) {
      this.setState({ blur: Number(event.target.value) });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;svg width="0" height="0" viewBox="0 0 0 0"&gt;
            &lt;filter id="outline"
              dangerouslySetInnerHTML={{
                __html: `&lt;feGaussianBlur result="blurOut" stdDeviation="${this.state.blur}" /&gt;`
              }}
            /&gt;
            &lt;filter id="outline1"&gt;
              &lt;feGaussianBlur result="blurOut" stdDeviation={this.state.blur} /&gt;`
            &lt;/filter&gt;            
          &lt;/svg&gt;
          &lt;h1 className="fe"&gt;Working&lt;/h1&gt;
          &lt;div className="control"&gt;&lt;input type="range" min="0" max="50" onChange={this.blurChange} value={this.state.blur} /&gt;&lt;h3&gt;Blur Slider&lt;/h3&gt;&lt;/div&gt;
          &lt;h1 className="fe1"&gt;Not Working&lt;/h1&gt;
          &lt;div className="control"&gt;&lt;input type="range" min="0" max="50" onChange={this.blurChange} value={this.state.blur} /&gt;&lt;h3&gt;Blur Slider&lt;/h3&gt;&lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("app"));
  </code></pre>
  
  <p>Is there anyway to update an SVG filter attribute as you normally would with React without using the <code>dangerouslySetInnerHTML</code> hack?</p>