X-Git-Url: https://git.ucc.asn.au/?p=ipdf%2Fsam.git;a=blobdiff_plain;f=chapters%2FBackground_DOM.tex;h=c89410b7252efffbd60932d2b1afd576f32f538c;hp=494f2b9c54e0c139d970ec0cc0c743a4c1b18989;hb=38a856db801fa59c8959d85dd3f8f83437710681;hpb=c9fe0f2e2b310beadf3f046a96f93d255a5b3b38

diff --git a/chapters/Background_DOM.tex b/chapters/Background_DOM.tex
index 494f2b9..c89410b 100644
--- a/chapters/Background_DOM.tex
+++ b/chapters/Background_DOM.tex
@@ -30,15 +30,23 @@ In HTML5, Javascript is not restricted to merely manipulating the DOM to alter t
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg id="svg_example" xmlns="http://www.w3.org/2000/svg"
-	version="1.1" width="104" height="186">
+<!-- These lines are comments to assist human readability -->
+<svg id="svg_example" 
+	xmlns="http://www.w3.org/2000/svg"
+	version="1.1" 
+	width="104" 
+	height="186"
+	transform="translate(1,0)">
+
+<!-- The straight line -->
 <path id="straightline" d = "m 0, 0 104, 186" 
 	style="stroke:#000000;"/>
+<!-- The first (bottom) rectangle -->
 <rect id="rect1"
 	x = "30" y = "20" width = "30" height = "150"
 	style = "fill:#0000ff; fill-opacity:0.5; 
 		stroke:#000000;"/>
+<!-- The curved region -->
 <path id="curvedshape"
 	d = "m 57,185 c 0,0 57,-13 32,-43 -25,-30 -53,2 -25,
 		-30 28,-32 52,17 28,-32 -24,-50 -16,44 -35,12 
@@ -46,6 +54,7 @@ In HTML5, Javascript is not restricted to merely manipulating the DOM to alter t
 		-94,68 -59,109 35,41 45,62 45,62 z"
 	style = "fill:#ff0000; fill-opacity:0.75; 
 		stroke:#000000;"/>
+<!-- The second (top) rectangle -->
 <rect id="rect2"
 	x = "12" y = "130" width = "60" height = "20"
 	style = "fill:#00ff00; fill-opacity:0.5;