Four methods for responding to events with SVG mouse (two of which support Firefox)

 Four methods for responding to events with SVG mouse

The mouse responds to events in four ways. The click event is used as an example.

Mouse events-SMIL

<? XML version = "1.0" encoding = "ISO-8859-1" standalone = "no"?>
<! Doctype SVG public "-// W3C // dtd svg 20010904 // en"
Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd>

<SVG xmlns = "http://www.w3.org/2000/svg"

Xmlns: xlink = "http://www.w3.org/1999/xlink">

<Rect x = "5" Y = "5" width = "40" Height = "40" fill = "red">
<Set attributename = "fill" to = "blue" begin = "click"/>
</Rect>
</SVG>

Example:
Http://www.kevlindev.com/tutorials/basics/events/mouse/svg_smil/click.svg

Mouse events-attributes

<? XML version = "1.0" encoding = "ISO-8859-1" standalone = "no"?>
<! Doctype SVG public "-// W3C // dtd svg 20010904 // en"
Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[
<! ATTLIST SVG
Xmlns: A3 CDATA # implied
A3: scriptimplementation CDATA # implied>
<! ATTLIST script
A3: scriptimplementation CDATA # implied>
]>
<SVG xmlns = "http://www.w3.org/2000/svg"

Xmlns: xlink = "http://www.w3.org/1999/xlink"

Xmlns: a3 = "http://ns.adobe.com/AdobeSVGViewerExtensions/3.0"

A3: scriptimplementation = "Adobe">
<SCRIPT type = "text/ecmascript" A3: scriptimplementation = "Adobe"> <! [CDATA [
Function changecolor (EVT ){
VaR rect = evt.tar get;

Rect. setattributens (null, "fill", "Purple ")
}
]> </SCRIPT>
<Rect x = "5" Y = "5" width = "40" Height = "40" fill = "red"
Onclick = "changecolor (EVT)"/>
</SVG>

Example:

Http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg

Mouse events-JavaScript + smil

<? XML version = "1.0" encoding = "ISO-8859-1" standalone = "no"?>
<! Doctype SVG public "-// W3C // dtd svg 20010904 // en"
Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[
<! ATTLIST SVG
Xmlns: A3 CDATA # implied
A3: scriptimplementation CDATA # implied>
<! ATTLIST script
A3: scriptimplementation CDATA # implied>
]>
<SVG onload = "makeshape (EVT )"
Xmlns = "http://www.w3.org/2000/svg"

Xmlns: xlink = "http://www.w3.org/1999/xlink"

Xmlns: a3 = "http://ns.adobe.com/AdobeSVGViewerExtensions/3.0"

A3: scriptimplementation = "Adobe">
<SCRIPT type = "text/ecmascript" A3: scriptimplementation = "Adobe"> <! [CDATA [
VaR svgns = "http://www.w3.org/2000/svg ";

Function makeshape (EVT ){
If (window. svgdocument = NULL)
Svgdocument = evt.tar get. 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.doc umentelement. appendchild (rect );
}
]> </SCRIPT>
</SVG>
Example:
Http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom_smil/click_js_smil.svg

Mouse events-eventlistener

<? XML version = "1.0" encoding = "ISO-8859-1" standalone = "no"?>
<! Doctype SVG public "-// W3C // dtd svg 20010904 // en"
Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"
[
<! ATTLIST SVG
Xmlns: A3 CDATA # implied
A3: scriptimplementation CDATA # implied>
<! ATTLIST script
A3: scriptimplementation CDATA # implied>
]>
<SVG onload = "makeshape (EVT )"
Xmlns = "http://www.w3.org/2000/svg"

Xmlns: xlink = "http://www.w3.org/1999/xlink"

Xmlns: a3 = "http://ns.adobe.com/AdobeSVGViewerExtensions/3.0"

A3: scriptimplementation = "Adobe">
<SCRIPT type = "text/ecmascript" A3: scriptimplementation = "Adobe"> <! [CDATA [
VaR svgns = "http://www.w3.org/2000/svg ";

Function makeshape (EVT ){
If (window. svgdocument = NULL)
Svgdocument = evt.tar get. 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.doc umentelement. appendchild (rect );
}

Function changecolor (EVT ){
VaR target = evt.tar get;
Target. setattributens (null, "fill", "Purple ");
}
]> </SCRIPT>
</SVG>

Example:
Http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom/click_js.svg