title: Why is no shape created?
body: <p>I am trying to learn SVG and have the following code. The point clicked is printed ok, but no shape is created. Can someone plese point out what I am doing wrong. </p>
  
  <pre><code>&lt;?xml version='1.0' standalone='no'?&gt;
  &lt;!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN' 'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'&gt;
  &lt;svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' onload='Init(evt)' onmousedown='Grab(evt)'  &gt;
  
  &lt;title&gt;Drag And Drop&lt;/title&gt;
  
  
  &lt;script&gt;&lt;![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);
      }
    };
  
  ]]&gt;&lt;/script&gt;
  
  &lt;rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' /&gt;
  &lt;/svg&gt;
  </code></pre>