Home :: Tutorials :: SVG :: Events

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