If you click on the text in the following figure, the background should change from purple to green.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="500px" height="150px" viewBox="0 0 500 150" 04: font-family="Times, serif" font-size="100px"> 05: 06: <script type="text/ecmascript"> 07: // <![CDATA[ 08: 09: function changeColor(evt){ 10: var myrectangle = document.getElementById("MyRectangle"); 11: myrectangle.setAttributeNS(null, "fill", "green"); 12: } 13: 14: // ]]> 15: </script> 16: 17: <g id="Button" onclick="changeColor(evt)"> 18: <rect id="MyRectangle" x="10" y="10" width="480" height="130" stroke="blue" stroke-width="5px" fill="purple"/> 19: <text x="250" y="115" text-anchor="middle" pointer-events="none">Click me.</text> 20: </g> 21: 22: </svg>
The main new thing about the example above is the <script> tag, which takes up lines 6-15. The script is written in ECMAScript (a cross platform variant of Javascript; See the Wikipedia entry on ECMAScript). ECMAScript is a scripting programming language. The text of the script often conflicts with the XML specification, so the script is marked as character data (CDATA). Lines 7 and 14 indicate that the lines in between (8-13) are charcter data. This guarantees that characters like "<" will not be interpreted as part of an XML tag, so we can use this character to compare sizes of integers in our script.
The above paragraph was probably too technical. The point should be that you should include lines like 7, 8, 14, and 15 in every SVG which contains scripting. Then the script will go in between the copies of lines 8 and 14.
The example above contains a group of objects, consisting of a rectangle with id "MyRectangle" and some text. When the user clicks on the group of objects, the browser notices that there is an onclick attribute which refers to the function changeColor from the script section. The browser than executes that function. In line 10, we search the document for the tag whose id is "MyRectangle". Then, we set the variable myrectangle to be the returned object. In line 11, we set the "fill" attribute of myrectangle to "green". This changes the color of the background.
We can also get the attributes of an object by similar methods.
01: <svg version="1.1" baseProfile="full" 02: xmlns="http://www.w3.org/2000/svg" 03: width="500px" height="150px" viewBox="0 0 500 150" 04: font-family="Times, serif" font-size="100px"> 05: 06: <script> 07: // <![CDATA[ 08: 09: function changeColor(evt){ 10: var myrectangle = document.getElementById("MyRectangle"); 11: var color = myrectangle.getAttributeNS(null, "fill"); 12: if (color == "purple") { 13: myrectangle.setAttributeNS(null, "fill", "green"); 14: } else { 15: myrectangle.setAttributeNS(null, "fill", "purple"); 16: } 17: } 18: 19: // ]]> 20: </script> 21: 22: <g id="Button" onclick="changeColor(evt)"> 23: <rect id="MyRectangle" x="10" y="10" width="480" height="130" stroke="blue" stroke-width="5px" fill="purple"/> 24: <text x="250" y="115" text-anchor="middle" pointer-events="none">Click me.</text> 25: </g> 26: 27: </svg>
In this example, we get the current "fill" of myrectangle on line 11. Then we test if it is the same as "purple" in line 12 (note the use of == to test for equality). If they are equal, we execute line 13, otherwise we execute line 15.
There are four relevant functions for accessing and manipulating attributes. These are all applied to an SVG element, which can be obtained using document.getElementById("..."), for instance.
It is worth commenting on the variables passed to the method. The content of attributeName is a string. In the examples above, it was "fill". The namespaceURI will typically be null, unless the attribute is defined from a different namespace. The only example of the use of a different namespace was in our description of the <use> tag. We will illustrate the use of this below.
If the following graphic is clicked, the third shape should toggle between being a triangle or a square.
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="450px" height="150px" viewBox="0 0 450 150" 04: font-family="Times, serif" font-size="100px" onclick="clicked(evt)"> 05: 06: <script type="text/ecmascript"> 07: // <![CDATA[ 08: 09: var xlinkNS = "http://www.w3.org/1999/xlink"; 10: 11: function clicked(evt){ 12: var mycopy = document.getElementById("MyCopy"); 13: var href=mycopy.getAttributeNS(xlinkNS, "href"); 14: if (href=="#MySquare") { 15: mycopy.setAttributeNS(xlinkNS, "xlink:href", "#MyTriangle"); 16: mycopy.setAttributeNS(null, "x", "150"); 17: } else { 18: mycopy.setAttributeNS(xlinkNS, "xlink:href", "#MySquare"); 19: mycopy.setAttributeNS(null, "x", "300"); 20: } 21: } 22: 23: // ]]> 24: </script> 25: 26: <rect id="MySquare" x="10" y="10" width="130" height="130" fill="red" stroke="blue" stroke-width="5px"/> 27: <polygon id="MyTriangle" points="160,10 290,10 160,140" fill="green" stroke="orange" stroke-width="5px"/> 28: <use id="MyCopy" xlink:href="#MySquare" x="300" y="0"/> 29: 30: </svg> 31:
We will describe the differences between this and the example above. First, the onclick attribute was moved to the <svg> tag. So, the function clicked(evt) function will be called whenever the user clicks anywhere on the graphic.
Second, we have added the xlink namespace to the SVG on line 2, as needed whenever we duplicate shapes. We also set a variable to this namespace on line 9. We use this namespace whenever we need to read or modify an xlink:href attribute. We still use null for other attributes.
