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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "click");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}

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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "mousedown");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}

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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "mouseup");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}

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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "mouseover");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}

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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "mouseout");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}

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");
    
    var set = svgDocument.createElementNS(svgns, "set");
    set.setAttributeNS(null, "attributeName", "fill");
    set.setAttributeNS(null, "to", "blue");
    set.setAttributeNS(null, "begin", "mousemove");
    
    rect.appendChild(set);
    svgDocument.documentElement.appendChild(rect);
}