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.
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