如何使用javascript向SVG添加形状？

Question

我尝试使用javascript添加的任何内容都不会显示。这是html。

private static void Number()
    {
        Console.Write("Type it in a number: ");
        int result;
        if (int.TryParse(Console.ReadLine(), out result))
        {
             // user input a valid integer
             // result varaible have the input integer
             Console.Write("Hi");
        }
        else
        {
           // user input none integer
           Console.WriteLine("Please type a number!");
        }
        Console.ReadLine();
    }

矩形显示正常。这是javascript：

<svg width="100" height="100" id="test">
    <rect width="10" height="10" style="fill:rgb(0,0,255);">
</svg>

Inspect显示：

var b = document.createElement('rect');
b.setAttribute('width', 100);
b.setAttribute('height', 100);
b.setAttribute('style', 'fill:rgb(0,0,255);');
document.getElementById('test').appendChild(b);

但是<svg width="100" height="100" id="test"> <rect width="10" height="10" style="fill:rgb(0,0,255);"> <rect width="100" height="100" style="fill:rgb(0,0,255);"> </svg> 没有出现。 svg是否需要更新或者什么？

注意：我想避免像jQuery这样的外部库，并尽可能保持简单。