SVGで動的に円を追加

• SVGは名前空間が必要なので、名前空間を忘れない
• SVGでのDocumentは evt.target.ownerDocumentで取得できる。

circle.svg

<svg xmlns="http://www.w3.org/2000/svg" onload="func(evt)">
<script>
function func(evt) {
    var ns = "http://www.w3.org/2000/svg";
    var doc = evt.target.ownerDocument;
    var circle = doc.createElementNS(ns, 'circle');
    circle.setAttribute('cx', '100');
    circle.setAttribute('cy', '100');
    circle.setAttribute('r', '50');
    doc.documentElement.appendChild(circle);
}
</script>
<rect x="10" y="10" width="100" height="100" />
</svg>