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