SVG updated with jQuery

Question

When I append rect element with x, y, width, height atributes to svg element, the svg was not updated (with jQuery append function). SVG element is dynamically created with:

this.svg = $( document.createElement('svg') );
this.container.append( this.svg ); // this.container is a div element

I think my browser (Google Chrome v57.0.2987.133) does not recognize the newly created elements svg and rect because styles tab in developer mode (F12) does not show 'user agent stylesheet' for them.

Append code:

var newSvgArea = $( document.createElement( mapArea.shape ) );
// -- SPECIFIC CODE --
newSvgArea.attr( 'data-visual-svg-area-elti', '' + i1 );            
newSvgArea.css('stroke', 'black');
newSvgArea.css('stroke-width', '2px');
newSvgArea.css('fill', 'transparent');
newSvgArea.css('stroke-opacity', '.5');
if (mapArea.shape == 'cicle') {
    newSvgArea.attr( 'cx', mapArea.coordX );
    newSvgArea.attr( 'cy', mapArea.coordY );
    newSvgArea.attr( 'r', mapArea.sizes[0] );
} else if (mapArea.shape == 'rect') {
    newSvgArea.attr( 'x', mapArea.coordX );
    newSvgArea.attr( 'y', mapArea.coordY );
    newSvgArea.attr( 'width', ( mapArea.sizes[0] - mapArea.coordX ) );
    newSvgArea.attr( 'height', ( mapArea.sizes[1] - mapArea.coordY ) );
}
// -- --
this.svg.append( newSvgArea );

Generated SVG :

<svg style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; display: block; background-color: transparent; z-index: 10; pointer-events: none;">
    <rect fill="black" x="20" y="29" width="155" height="56"></rect>
    <rect fill="black" x="342" y="84" width="141" height="54"></rect>
    <rect fill="black" x="355" y="172" width="150" height="53"></rect>
    <rect fill="black" x="376" y="272" width="148" height="49"></rect>
    <rect fill="black" x="379" y="338" width="146" height="55"></rect>
    <rect fill="black" x="376" y="414" width="148" height="52"></rect>
    <rect fill="black" x="402" y="533" width="154" height="56"></rect>
    <rect fill="black" x="391" y="627" width="158" height="60"></rect>
    <rect fill="black" x="57" y="511" width="140" height="52"></rect>
    <rect fill="black" x="58" y="578" width="145" height="53"></rect>
    <rect fill="black" x="102" y="656" width="155" height="55"></rect>
</svg>

Work fine in jsfiddle : https://jsfiddle.net/4azftdzt/