Dynamically Adding Multiple SVG rect Elements

---

Key Constructs

The following ECMAScript function changes the vertices of a quadrilateral that is specified by an existing SVG path element:

function clickPath1(event) {    var pathNode = event.target;    var points = pathNode.getAttribute("points");    clickCount += 1;    if( clickCount % 2 == 0 )    {       str = "100,100 300,100 300,200 200,200"       pathNode.setAttribute("points", str);       pathNode.setAttribute("fill", 'red');    }    else    {       str = "250,100 300,100 300,200 200,200"       pathNode.setAttribute("points", str);       pathNode.setAttribute("fill", 'green');    }

The following ECMAScript function changes the radius of an existing SVG circle element when you click on the circle with your mouse:

function clickLeftCircle(event) {    var circle = event.target;    var currentX = circle.getAttribute("cx");    if(currentX < 250)    {       circle.setAttribute("cx", currentX*1.1);    }    else    {       circle.setAttribute("cx", "150");    } }

The following ECMAScript function removes an existing rectangle when you click on the rectangle with your mouse:

function remove(event) {    var rectNode = event.target;    var parent   = rectNode.parentNode;    parent.removeChild(rectNode); }

The following code fragment can be included in an ECMAScript function in order to create a new circle:

circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("x",     xPos); circleNode.setAttribute("y",     yPos); circleNode.setAttribute("cx",    cx); circleNode.setAttribute("cy",    cy); circleNode.setAttribute("style", style); circleNode.setAttribute("r",     width/2); parent.appendChild(circleNode);

---