CODEWITHSUNDEEP
javascriptsvgshapes
mihajlv
mihajlv

Reputation: 2315

Why is no shape created?

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. 

<?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>

Upvotes: 0

Views: 41

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

BackDrop is a <rect> and <rect> elements are not containers that can have graphic element children. If you create the circles as children of the root element instead i.e. change

    BackDrop.appendChild(c1);

to

    SVGRoot.appendChild(c1);

the circles will appear.

Upvotes: 2

Related Questions