javascript - Constructed SVG does not work where HTML-drawn does -

when draw svg viewbox attribute in html source code can re-size window , svg automatically scales.

<svg xmlns="http://www.w3.org/2000/svg" viewbox="-350 -250 700 500">     <circle r="200" class="face" fill="green"/>     <path fill="none" class="face"        transform="translate(-396,-230)"         d="m487.41, 282.411c-15.07, 36.137-50.735, 61.537-92.333,           61.537 c-41.421, 0-76.961-25.185-92.142-61.076"/>     <circle cx="-60" cy="-50" r="20" fill="black"/>     <circle cx="60" cy="-50" r="20" fill="black"/> </svg> 

but when construct exact same svg d3.js viewbox doesn't work!

var smileyred = d3.select("#js")                 .append("svg")                 .attr("xmlns", "http://www.w3.org/2000/svg")                 .attr("viewbox", "-350 -250 700 500");  smileyred.append("circle")      .attr('r','200')      .attr('class','face')      .attr('fill','red'); smileyred.append("path")     .attr('fill','none')     .attr('class','face')     .attr('transform','translate(-396,-230)')     .attr('d','m487.41, 282.411c-15.07, 36.137-50.735, 61.537-92.333,                61.537 c-41.421, 0-76.961-25.185-92.142-61.076'); smileyred.append("circle")      .attr('cx','-60')      .attr('cy','-50')      .attr('r','20')      .attr('fill','black'); smileyred.append("circle")      .attr('cx','60')      .attr('cy','-50')      .attr('r','20')      .attr('fill','black'); 

jsfiddle demo

viewbox case-sensitive attribute

replace viewbox viewbox

.attr("viewbox", "-350 -250 700 500"); 

from here: http://www.w3.org/tr/svg/styling.html#casesensitivity

property declarations via presentation attributes expressed in xml [xml10], case-sensitive.