| home / programming / perl / graphics / chap7 / 2 |    [previous] [next] |
|
|
SVG elements can be manipulated using ECMAscript (better known as JavaScript). JavaScript scripts are attached to SVG objects as callbacks associated with a particular event. A script can be called when an element is first loaded, when the mouse passes over it, or when the mouse button is clicked on the element. Some of the element events are:
onfocusin
onfocusout
onactivate
onclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onloadScripts can also be called for certain document events:
onunload
onabort
onerror
onresize
onscroll
onzoom Or they can be triggered at three points in the execution of an animation:
onbegin
onend
onrepeatXML specifies a special tag for character data such as scripts that may have embedded XML tags. The script should be wrapped up in a character data (CDATA) tag:
<![CDATA[ ...character data goes here... ]]>With JavaScript, you can access and manipulate most attributes of an element using the DOM interface. JavaScript can be used as an alternative to the animation tags for creating animations. For a complete reference to JavaScript, see JavaScript: The Definitive Guide by David Flanagan (O'Reilly).
The next example uses XML::Writer to create an SVG file that is very similar to the SWF::DisplayItem example in Chapter 9. The result is two SVG images: a top-level image that consists of a pink background, and the block of animated squares. Each of the squares in the grid has a mouseover event associated with it that turns the square red when the mouse is positioned over it. The user can also click on a point on the pink background to reposition the center of the animated object.
#!/usr/bin/perl -w
#
# Twirling squares.
use strict;
use XML::Writer; # Used to write the SVG output
use IO::Scalar;
my ($width, $height) = (200,200);
my $sprite = new IO::Scalar;
my $writer = XML::Writer->new(OUTPUT => $sprite);
$writer->setDataMode(1);
$writer->setDataIndent(2);
$writer->startTag('svg',
id => 'sprite',
height => $height,
width => $width,
onload => "StartAnimation(evt)",
'xmlns:xlink' => 'http://www.w3.org/1999/Xlink');Add the CDATA element containing the script:
$writer->startTag('script',
type => "text/ecmascript");
print $sprite <<ENDSCRIPT;
<![CDATA[
var delay = 1;
var angle=0;
var cx = 100;
var cy = 100;
var frames = 30;
var direction = -1;
var count = 0;
var element = new Array( );
var xIncrement = new Array( );
var yIncrement = new Array( );
var parent;
var i,x,y;| home / programming / perl / graphics / chap7 / 2 | [previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: February 19, 2003
Revised: February 19, 2003
URL: http://webreference.com/programming/perl/chap7/2/3.html
