Horizontal Animation
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
setTimeout("advance()", speed);
}
function advance() {
if ( ++x > 90 ) x = 0;
rect.setAttributeNS(null, "x", x);
setTimeout("advance()", speed);
}
Vertical Animation
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
setTimeout("advance()", speed);
}
function advance() {
if ( ++y > 90 ) y = 0;
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Diagonal Animation
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
setTimeout("advance()", speed);
}
function advance() {
if ( ++y && ++x > 90 ) x = y = 0;
rect.setAttributeNS(null, "x", x);
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Rotation Animation
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
setTimeout("advance()", speed);
}
function advance() {
var x;
var y;
var radian;
if ( ++angle > 90 ) angle = 0;
radian = angle * radians_per_degree;
x = radius * Math.cos(radian);
y = radius * Math.sin(radian);
rect.setAttributeNS(null, "x", x);
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Animation on a Path
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
setTimeout("advance()", speed);
}
function advance() {
if ( ++percent > 100 ) percent = 0;
var point = getBezierPointAt(percent/100);
rect.setAttributeNS(null, "x", point.x - 5);
rect.setAttributeNS(null, "y", point.y - 5);
setTimeout("advance()", speed);
}