Getting started with JavaScript and SVG

Let us start with the following example*: (you should be able to click on the Green button as it appears in Moodle and see a response.)

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script>
<![CDATA[
function Here(){
alert("hello")
}
]]>
</script>
<text id="Text" x="87" y="100" font-size="26" fill="black">Click</text>
<rect id="Rect" onclick="Here()" x="75" y="76" height="30" width="80"
stroke="black" stroke-width="2" fill="green" opacity=".5" rx="10"/>
</svg>

Comments:

  • the text is partly visible behind a rect, which means it cannot be clicked upon. (If we wanted it in front, then we'd have to figure out whether to "listen" to the click on the rect, the text, or on a new group we might create to contain both the text and the rect.)
  • when we click on the rect, we activate the JavaScript function named "Here()." The parentheses next to the word here mean that it is the name of the function. (Functions are sort of like verbs. If we put something inside the parentheses it is like the direct object or English accusative case. )
  • the commands (in this case just one: alert('hello') ) inside the curly braces '{' and '}' are the JavaScript program that will be run when we activate the function. .
  • the net result of the above example, is that by clicking on the green button, the word 'hello' should appear in an alert box.
  • alert boxes are not considered good user interface; they are used primary just for debugging by programmers.

We won't belabor, here, the details of why this is a good place to start, but we will, in fact, begin with this basic prototype for all the examples that follow. We'll just add some things here and a few more there as needed. Usually, when I start on a scripting project I use this simple template, since it already has just a bit more of the typical syntax that I am likely to use. You may wish to do the same.

* I moved the button a bit up and to the left and rounded the rectangle just to improve the aesthetics a bit over what was in the book. In this example, I used a viewBox to make everything relative to the screen size, for possibly better scalability to mobile devices.

General remarks:

While the above example accomplishes very little, it does serve the purpose of showing how a JavaScript function can be activated from a mouse-click within an SVG document. This is what we in the trade of teaching programming call a gentle introduction: the sort of "HELLO WORLD" program typically found in an introduction to programming. Programming is a big topic (as big as mathematics, indeed, as it holds the theory of computing within it), so we will provide just a glimpse of what can be done with SVG and script working together.

The SVG Primer's section on Dynamic SVG and JavaScript, would provide, I think, a good companion read to this, as it goes into considerably more detail than our two weeks will allow. We've tried to make these lessons self-contained, but you may wish to refer to the Primer for greater depth and breadth.

Next:



On to Using script to find an object and change its attributes Resource