Click Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("click", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
Mousedown Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("mousedown", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
Mouseup Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("mouseup", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
Mouseover Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("mouseover", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
Mouseout Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("mouseout", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}
Mousemove Event
var svgns = "http://www.w3.org/2000/svg";
function makeShape(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
var rect = svgDocument.createElementNS(svgns, "rect");
rect.setAttributeNS(null, "x", 5);
rect.setAttributeNS(null, "y", 5);
rect.setAttributeNS(null, "width", 40);
rect.setAttributeNS(null, "height", 40);
rect.setAttributeNS(null, "fill", "green");
rect.addEventListener("mousemove", changeColor, false);
svgDocument.documentElement.appendChild(rect);
}
function changeColor(evt) {
var target = evt.target;
target.setAttributeNS(null, "fill", "purple");
}