Changes of className of path inside of SVG element not working

[matystl]

Draw SVG with path element which has className setted from state.
render:<svg> <path className={'a'+this.state.number} ...> </path> </svg>

Then change state by some event which result in redraw of svg/path element.
this.setState({'number' : ...);

Expected result path will have new className. Working result component is redrawn but className on path didn't change.

Example: http://jsfiddle.net/w4nxG/
Full source code if example is not working:
html:
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
css:
.a0 { color: red; stroke: red; } .a1 { color: green; stroke: green; }
js:

var Hello = React.createClass({
    getInitialState: function() {
      return {'number': 0};
    },
    handleClick: function(e) {
        this.setState({'number' : (this.state.number +1)%2});
    },
    render: function() {
     return 
     <div>
       <svg width="60" height="60">
         <path className={'a'+this.state.number} 
               fill="transparent" 
               stroke-width="10" 
               d="M0,0 L100,100">
         </path> 
       </svg>
       <div className={'a'+this.state.number}  
            onClick={this.handleClick}>
          Hello {this.state.number}
       </div>
     </div>;
    }
}); 
React.renderComponent(<Hello name="World" />, document.body);

[sophiebits]

This is a known bug; a few PRs are open with possible fixes, like #1590.

[GuilhermeBorges3Ddev]

Can I change my svg dynamically using a state?!
Let me explain, i've six icons on SVG format, and each of then have to be rendered when a state change... It's possible?