Javascript 为什么不创建形状？

我正在尝试学习SVG，并有以下代码。单击的点打印正常，但不创建任何形状。有人能指出我做错了什么吗

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN' 'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' onload='Init(evt)' onmousedown='Grab(evt)'  >

<title>Drag And Drop</title>


<script><![CDATA[
  var SVGDocument = null;
  var SVGRoot = null;

  var BackDrop = null;

  function Init(evt)
  {
     SVGDocument = evt.target.ownerDocument;
     SVGRoot = SVGDocument.documentElement;
     BackDrop = SVGDocument.getElementById('BackDrop');
  }

  function Grab(evt)
  {
     var targetElement = evt.target;
     if ( BackDrop == targetElement )
     {
        alert ( 'point: ' + evt.clientX + ' ' + evt.clientY);

        var c1 = SVGDocument.createElementNS("http://www.w3.org/2000/svg", "circle");
        c1.setAttribute("cx", evt.clientX);
        c1.setAttribute("cy", evt.clientY);
        c1.setAttribute("r", "100");
        c1.setAttribute("fill", "#336699");
        BackDrop.appendChild(c1);
    }
  };

]]></script>

<rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' />
</svg>

拖放

背景是一个

，

元素不是可以包含图形元素子元素的容器。如果将圆创建为根元素的子元素，即更改

    BackDrop.appendChild(c1);

到

圆圈将出现

    SVGRoot.appendChild(c1);