Adding and removing tags

Regular polygons:

The following graphic allows the viewer to see any regular polygon.

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.

Source code and comments:

Source of regular_polygons.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg"       
03:      width="500px" height="530px" viewBox="0 0 500 530"
04:      font-family="Times, serif" font-size="20px">
05: 
06: <script>
07: // <![CDATA[
08: 
09: var sides=4;
10: var svgNS = "http://www.w3.org/2000/svg";
11: 
12: function decrease(evt){
13:    if (sides > 3) {
14:       sides = sides - 1;
15:       update();
16:    }
17: }
18: 
19: function increase(evt){
20:    sides = sides + 1;
21:    update();
22: }
23: 
24: function update() {   
25:    var sidesText = document.getElementById("sides");
26:    sidesText.firstChild.nodeValue = "" + sides;
27:    
28:    var oldpolygon=document.getElementById("Polygon");
29:    var parent = oldpolygon.parentNode;   
30:    parent.removeChild(oldpolygon);
31: 
32:    var newpolygon = document.createElementNS(svgNS, "polygon");
33: 
34:    var points = "";
35:    var i=0;
36:    while (i < sides) {
37:       points = points + Math.cos(2*Math.PI*i/sides) + "," + Math.sin(2*Math.PI*i/sides) + " ";
38:       i = i + 1;
39:    }
40:    newpolygon.setAttributeNS(null, "points", points);
41:    newpolygon.setAttributeNS(null, "id", "Polygon");   
42: 
43:    parent.appendChild(newpolygon);
44: }
45: 
46: // ]]>
47: </script>
48: 
49: <text x="250" y="20" text-anchor="middle" fill="black">This is a regular <tspan id="sides">4</tspan>-gon.</text>
50: 
51: <g transform="translate(250,280) scale(248)" stroke="red" fill="yellow" stroke-width="0.008px">
52:    <polygon id="Polygon" points="1,0 0,1 -1,0 0,-1"/>
53: </g>
54: 
55: <text x="10" y="40" text-anchor="start" text-decoration="underline" cursor="pointer" fill="blue" onclick="decrease(evt)">Fewer sides!</text>
56: <text x="490" y="40" text-anchor="end" text-decoration="underline" cursor="pointer"  fill="blue" onclick="increase(evt)">More sides!</text>
57: </svg>

First, this example could have been done more simply by modifying attributes. But, I wanted to include a simple script which adds and removes tags from a document.

At the beginning of the script (line 9), we define a variable sides and set it equal to 4. When the reader clicks "More" or "Fewer", the script changes updates the variable sides and then calls the update() function.

The first two lines of the update() function update the contents of the <tspan> tag with id="sides". Line 25 sets sidesText to be that tag (or element). Line 26 adds the empty string (text) "" to the number sides. Adding anything to a string converts the thing to a string and then concatenates. We store the resulting string in the text inside the child of sidesText. In this case, the child is the contained text, which we replace.

Lines 28-30 demonstrate how to remove a tag (and all of its children if there are any). On line 28, we set oldpolygon to the element we want to remove. Then we set parent to the element that contains oldpolygon. In this case, this is the <g> tag of the document. The only way (I know of) to remove a node from the document is by using the node that contains it. We remove oldpolygon in line 30.

Line 32 creates a new tag (or element). We create a tag in the SVG namespace; note that the variable svgNS was defined on line 10. We create a polygon tag and call it newpolygon. Next we need to set some of the attributes of the element. Lines 34-39 construct a string for the points attribute of the polygon. (See the next paragraph.) We set the attributes "points" and "id" in lines 40 and 41. Line 43 adds the constructed element to the <g> tag, which we called parent above.

We will now describe how we constructed the string points which we use as an attribute for the polygon. Line 34 sets points to be the empty string. Then we setup a new variable i and set it equal to zero. Now we enter a while loop. Lines 37-38 are executed repeatedly so long as i < sides. Line 38 adds one to i so, the lines will execute a number of times equal to the number of sides of the polygon, and i will take the values 0, 1, 2, ..., sides-1. Line 37 updates points. We add the cosine of some angle to points, which has the effect of converting this number to a string and concatenating, then we concatenate a comma, then the sine of the angle, and finally a space (so that the sine and the next cosine we add are not adjacent).

Notes on inserting and removing elements from the document:

Creating a new element:

Use createElementNS(namespaceURI, tagName). Here namespaceURI should be the string "http://www.w3.org/2000/svg" or a variable containing that string. Also, tagName should be a string indicating the name of the tag being created. In the above example, we used "polygon".

Adding an element:

There are two ways to add an element, all of which require access to the new parent element, which could be document. We assume the variable parent has been setup as in the above example.

Together, these methods allow you to insert a new tag anywhere inside the list of children of the parent. Note that the place of the insertion determines how the elements are layered. For instance, appendChild will make the new element appear on top of the other children.

Removing an element:

Use parent.removeChild(oldChild).

Navigating the structure of the document:

Assume that elt is an element of the document. Then the following are defined (possibly null):

A fancier example:

Click the image to subdivide the triangle and converge to the Sierpinski Triangle.

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
Source of sierpinski-triangle2.svg:Hide line numbers 
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
03:      width="600px" height="600px" viewBox="0 0 600 600"
04:      onload="setup()" onclick="newLevel(evt)">
05: 
06: <script>
07: //<![CDATA[
08: 
09: var svgNS = "http://www.w3.org/2000/svg";
10: var xlinkNS = "http://www.w3.org/1999/xlink";
11: var defs;
12: var display;
13: var l=0; // current level
14:  
15: function setup() {
16:    defs = document.getElementById("defs");
17:    display = document.getElementById("display");   
18: }
19: 
20: function newLevel(evt){   
21:    if (l>=8) {
22:       return; // We don't want to crash the browser!
23:    }
24: 
25:    var g=document.createElementNS(svgNS, "g");   
26:    g.setAttributeNS(null,"id","Level"+(l+1));
27:    
28:    var use=document.createElementNS(svgNS, "use");   
29:    use.setAttributeNS(xlinkNS, "xlink:href", "#Level"+l);
30:    use.setAttributeNS(null, "transform", "scale(0.5)");
31:    g.appendChild(use); 
32: 
33:    use=document.createElementNS(svgNS, "use");   
34:    use.setAttributeNS(xlinkNS, "xlink:href", "#Level"+l);
35:    use.setAttributeNS(null, "transform", "translate(300,0) scale(0.5)");
36:    g.appendChild(use); 
37: 
38:    use=document.createElementNS(svgNS, "use");   
39:    use.setAttributeNS(xlinkNS, "xlink:href", "#Level"+l);
40:    use.setAttributeNS(null, "transform", "translate(0,300) scale(0.5)");
41:    g.appendChild(use);
42:    
43:    defs.appendChild(g); 
44:    l=l+1;
45:    display.setAttributeNS(xlinkNS, "xlink:href", "#Level"+l);
46: }
47: 
48: // ]]>
49: </script>
50: 
51: <defs id="defs">
52:    <polygon id="Level0" points="0,0 600,0 0,600" fill="blue"/>
53: </defs>
54: 
55: <use id="display" xlink:href="#Level0" transform="rotate(180, 300, 290) skewX(30) scale(1,0.866025404)"/>
56: 
57: </svg>
58:

References:

This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!