Move the mouse over the green leaf in the picture below to grow a tree.
You can view a full screen version of this graphic.
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="480px" height="320px" viewBox="-6 -5 12 8" 04: font-family="Times, serif" font-size="100px"> 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: 12: function grow(evt){ 13: var leaf = evt.currentTarget; 14: leaf.setAttributeNS(xlinkNS, "xlink:href", "#trunk"); 15: leaf.removeAttributeNS(null,"onmouseover"); 16: var parent = leaf.parentNode; 17: 18: var newGroup1 = document.createElementNS(svgNS,"g"); 19: newGroup1.setAttributeNS(null, "transform", "rotate(45) scale(0.707106781) translate(1,-3)"); 20: var newLeaf1 = document.createElementNS(svgNS,"use"); 21: newLeaf1.setAttributeNS(xlinkNS, "xlink:href", "#leaf"); 22: newLeaf1.setAttributeNS(null, "onmouseover", "grow(evt)"); 23: newGroup1.appendChild(newLeaf1); 24: parent.appendChild(newGroup1); 25: 26: var newGroup2 = document.createElementNS(svgNS,"g"); 27: newGroup2.setAttributeNS(null, "transform", "rotate(-45) scale(0.707106781) translate(-1,-3)"); 28: var newLeaf2 = document.createElementNS(svgNS,"use"); 29: newLeaf2.setAttributeNS(xlinkNS, "xlink:href", "#leaf"); 30: newLeaf2.setAttributeNS(null, "onmouseover", "grow(evt)"); 31: newGroup2.appendChild(newLeaf2); 32: parent.appendChild(newGroup2); 33: } 34: 35: // ]]> 36: </script> 37: 38: <defs> 39: <polygon id="trunk" points="0,0 -1,1 -1,3 1,3 1,1" fill="brown" stroke="black" stroke-width="0.1"/> 40: <polygon id="leaf" points="0,0 -1,1 -1,3 1,3 1,1" fill="green"/> 41: </defs> 42: 43: <use xlink:href="#leaf" onmouseover="grow(evt)"/> 44: 45: </svg>
The following graphic and source code describe what the document looks like after a few of the brown pentagons are passed over by the mouse. This should give you an idea how the script works.
01: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 02: version="1.1" baseProfile="full" 03: width="480px" height="320px" viewBox="-6 -5 12 8" 04: font-family="Times, serif" font-size="100px"> 05: 06: <script> 07: //<![CDATA[ 08: 09: function grow(evt){ 10: // Contents of function removed... 11: // The figure will no longer be interactive. 12: } 13: 14: // ]]> 15: </script> 16: 17: <defs> 18: <polygon id="trunk" points="0,0 -1,1 -1,3 1,3 1,1" fill="brown" stroke="black" stroke-width="0.1"/> 19: <polygon id="leaf" points="0,0 -1,1 -1,3 1,3 1,1" fill="green"/> 20: </defs> 21: 22: <use xlink:href="#trunk"/> 23: <g transform="rotate(45) scale(0.707106781) translate(1,-3)"> 24: <use xlink:href="#trunk"/> 25: <g transform="rotate(45) scale(0.707106781) translate(1,-3)"> 26: <use xlink:href="#leaf" onmouseover="grow(evt)"/> 27: </g> 28: <g transform="rotate(-45) scale(0.707106781) translate(-1,-3)"> 29: <use xlink:href="#trunk"/> 30: <g transform="rotate(45) scale(0.707106781) translate(1,-3)"> 31: <use xlink:href="#leaf" onmouseover="grow(evt)"/> 32: </g> 33: <g transform="rotate(-45) scale(0.707106781) translate(-1,-3)"> 34: <use xlink:href="#leaf" onmouseover="grow(evt)"/> 35: </g> 36: </g> 37: </g> 38: <g transform="rotate(-45) scale(0.707106781) translate(-1,-3)"> 39: <use xlink:href="#leaf" onmouseover="grow(evt)"/> 40: </g> 41: 42: </svg> 43:
