Home :: Tutorials :: SVG :: Animation

Horizontal Animation

function makeShape(evt) {
    var rect, animateX;

    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
    
    rect = svgDocument.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "y", "45");
    rect.setAttributeNS(null, "width", "10");
    rect.setAttributeNS(null, "height", "10");
    rect.setAttributeNS(null, "fill", "green");
    
    animateX = svgDocument.createElementNS(svgns, "animate");
    animateX.setAttributeNS(null, "attributeName", "x");
    animateX.setAttributeNS(null, "from", "0");
    animateX.setAttributeNS(null, "to", "90");
    animateX.setAttributeNS(null, "dur", "10s");
    animateX.setAttributeNS(null, "repeatCount", "indefinite");
    
    rect.appendChild(animateX);

    svgDocument.documentElement.appendChild(rect);
}

Vertical Animation

function makeShape(evt) {
    var rect, animateY;

    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
    
    rect = svgDocument.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "x", "45");
    rect.setAttributeNS(null, "width", "10");
    rect.setAttributeNS(null, "height", "10");
    rect.setAttributeNS(null, "fill", "green");
    
    animateY = svgDocument.createElementNS(svgns, "animate");
    animateY.setAttributeNS(null, "attributeName", "y");
    animateY.setAttributeNS(null, "from", "0");
    animateY.setAttributeNS(null, "to", "90");
    animateY.setAttributeNS(null, "dur", "10s");
    animateY.setAttributeNS(null, "repeatCount", "indefinite");
    
    rect.appendChild(animateY);

    svgDocument.documentElement.appendChild(rect);
}

Diagonal Animation

function makeShape(evt) {
    var rect, animateX, animateY;

    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
    
    rect = svgDocument.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "width", "10");
    rect.setAttributeNS(null, "height", "10");
    rect.setAttributeNS(null, "fill", "green");
    
    animateX = svgDocument.createElementNS(svgns, "animate");
    animateX.setAttributeNS(null, "attributeName", "x");
    animateX.setAttributeNS(null, "from", "0");
    animateX.setAttributeNS(null, "to", "90");
    animateX.setAttributeNS(null, "dur", "10s");
    animateX.setAttributeNS(null, "repeatCount", "indefinite");
    
    animateY = svgDocument.createElementNS(svgns, "animate");
    animateY.setAttributeNS(null, "attributeName", "y");
    animateY.setAttributeNS(null, "from", "0");
    animateY.setAttributeNS(null, "to", "90");
    animateY.setAttributeNS(null, "dur", "10s");
    animateY.setAttributeNS(null, "repeatCount", "indefinite");
    
    rect.appendChild(animateX);
    rect.appendChild(animateY);

    svgDocument.documentElement.appendChild(rect);
}

Rotation Animation

function makeShape(evt) {
    var rect, animate;
    
    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
    
    rect = svgDocument.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "x", "45");
    rect.setAttributeNS(null, "width", "10");
    rect.setAttributeNS(null, "height", "10");
    rect.setAttributeNS(null, "fill", "green");
    
    animate = svgDocument.createElementNS(svgns, "animateTransform");
    animate.setAttributeNS(null, "attributeName", "transform");
    animate.setAttributeNS(null, "type", "rotate");
    animate.setAttributeNS(null, "from", "0");
    animate.setAttributeNS(null, "to", "90");
    animate.setAttributeNS(null, "dur", "10s");
    animate.setAttributeNS(null, "repeatCount", "indefinite");
    
    rect.appendChild(animate);

    svgDocument.documentElement.appendChild(rect);
}

Animation on a Path

function makeShape(evt) {
    var rect, animate;

    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
    
    rect = svgDocument.createElementNS(svgns, "rect");
    rect.setAttributeNS(null, "x", "-5");
    rect.setAttributeNS(null, "y", "-5");
    rect.setAttributeNS(null, "width", "10");
    rect.setAttributeNS(null, "height", "10");
    rect.setAttributeNS(null, "fill", "green");
    
    animate = svgDocument.createElementNS(svgns, "animateMotion");
    animate.setAttributeNS(null, "path", "M10 50 C10 0 90 0 90 50");
    animate.setAttributeNS(null, "dur", "10s");
    animate.setAttributeNS(null, "repeatCount", "indefinite");
    
    rect.appendChild(animate);

    svgDocument.documentElement.appendChild(rect);
}