javascriptでSVGテキストを作成すると期待通りに動作しない

Question

javascriptでSVGテキスト要素を作成する際に問題があります。問題は、ウィンドウのサイズが変更されるときにスケーリングされないようにすることではないということです。このフィドルで

ルック：https://jsfiddle.net/cduL72mf/2/

はなぜjavscript-生成「SVGtext 2」は、私は出力がまったく同じである見ることができる「SVGtext 1」のように動作されていませんか？私は何が欠けていますか？

var xmlns = 'http://www.w3.org/2000/svg'; 
 
var svgelement = document.createElementNS(xmlns, 'svg'); 
 
svgelement.id='svg2'; 
 
svgelement.setAttribute('viewbox', '0 0 300 200'); 
 
document.body.appendChild(svgelement); 
 

 
var svgtext = document.createElementNS(xmlns, 'text'); 
 
svgtext.id='text2'; 
 
svgtext.setAttribute('x', '56'); 
 
svgtext.setAttribute('y', '74'); 
 
svgtext.setAttribute('font-size', '33'); 
 
var textnode = document.createTextNode('SVGText 2'); 
 
svgtext.appendChild(textnode); 
 
svgelement.appendChild(svgtext);

svg { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<svg id="svg1" viewbox="0 0 300 200"> 
 
    <text id="text1" x="56" y="74" font-size="33">SVGText 1</text> 
 
</svg>

Answer 1

viewboxviewBoxでなければなりません。大文字と小文字が区別されます。

他のSVG（ "svg1"）の小文字のバージョンは、HTMLパーサがより寛容であるために受け入れられます。あなたの属性名を修正します。

var xmlns = 'http://www.w3.org/2000/svg'; 
 
var svgelement = document.createElementNS(xmlns, 'svg'); 
 
svgelement.id='svg2'; 
 
svgelement.setAttribute('viewBox', '0 0 300 200'); 
 
document.body.appendChild(svgelement); 
 

 
var svgtext = document.createElementNS(xmlns, 'text'); 
 
svgtext.id='text2'; 
 
svgtext.setAttribute('x', '56'); 
 
svgtext.setAttribute('y', '74'); 
 
svgtext.setAttribute('font-size', '33'); 
 
var textnode = document.createTextNode('SVGText 2'); 
 
svgtext.appendChild(textnode); 
 
svgelement.appendChild(svgtext);

svg { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<svg id="svg1" viewbox="0 0 300 200"> 
 
    <text id="text1" x="56" y="74" font-size="33">SVGText 1</text> 
 
</svg>