Home :: Tutorials :: SVG :: Animation

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);
}