Dynamically Removing an SVG Element

---

Adding an SVG Element via ECMAScript

Consider the rectangle rendered in Figure 12.4.

Figure 12.4: Adding a circle.

The SVG document in Listing 12.4 demonstrates how to use the SVG onclick element in order to invoke an ECMAScript function that removes an SVG rect element and adds an SVG circle element.

Listing 12.4 addElement1.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">   <script type="text/ecmascript">   <![CDATA[     var rectNode = null;     var parent   = null;     var svgDocument = null;     // Remove rectangle and add circle     function remove(event)     {        // remove the rectangle...        rectNode = event.target;        parent   = rectNode.parentNode;        parent.removeChild(rectNode);        svgDocument = parent.getOwnerDocument();        // and add a circle...        circleNode = svgDocument.createElement("circle");        circleNode.setAttribute("style","fill:blue");        circleNode.setAttribute("cx", "100");        circleNode.setAttribute("cy", "100");        circleNode.setAttribute("r",  "100");        parent.appendChild(circleNode);     }   ]]> </script>   <!-- ==================================== -->   <g transform="translate(50,50)">      <text  font-size="24" fill="blue">        Click inside the rectangle:      </text>   </g>   <g transform="translate(50,100)">      <rect onclick="remove(evt)" fill="red"            x="0" y="0" width="200" height="100"/>   </g>  </svg>

Remarks

The SVG document in Listing 12.4 demonstrates how to remove an existing SVG element and replace it with a newly created SVG element. The SVG rect element is made 'mouse-aware' with the following code fragment:

<g transform="translate(50,100)">    <rect onclick="remove(evt)" fill="red"          x="0" y="0" width="200" height="100"/> </g>

When you click inside this rectangle with your mouse, the ECMAScript function remove() is invoked with the built-in variable evt, which then removes the SVG rect element by executing the following lines of code:

// remove the rectangle... rectNode = event.target; parent   = rectNode.parentNode; parent.removeChild(rectNode);

The reference to the current SVG document, obtained by the following line of code, is needed in order to create a new SVG circle element:

svgDocument = parent.getOwnerDocument();

Next, the ECMAScript function remove() creates a new SVG circle element with the following code fragment:

// and add a circle... circleNode = svgDocument.createElement("circle");

Finally, the ECMAScript function remove() assigns values to the attributes style, cx, cy, and r of the newly created circle and then adds the new SVG circle element as a child of the parent node:

circleNode.setAttribute("style","fill:blue"); circleNode.setAttribute("cx", "100"); circleNode.setAttribute("cy", "100"); circleNode.setAttribute("r", "100"); parent.appendChild(circleNode);

The text message that provides instructions for users (telling them to click inside the rendered rectangle with their mouse) is:

<g transform="translate(50,50)">    <text font-size="24" fill="blue">      Click inside the rectangle:    </text> </g>

The SVG code in Listing 12.4 gives you the techniques for creating more sophisticated SVG documents that require removing or adding multiple SVG elements. One such example is the SVG document in Listing 12.5, which shows you how to keep track of multiple SVG elements.

---