Graphics Reference
In-Depth Information
Figure
.
.
Grouped elements
an API and a corresponding object model for manipulating XML documents. Each
SVG element can includeevent handlersthat implement the appropriate scriptwhen
events are captured (such as keyboard and mouse operations and SVG document
loading). In this example, the
onclick
attribute has an
alert
method (which
displays messages in a pop-up window) that is set as the event handler in the group
element that has text and circle elements. he most frequently used event handlers
in SVG are those associated with mouse events, such as
onmouse
{
down, move,
out, over, up
}, SVG-specific events such as
onload
,
onresize
and
onzoom
,andkeyboardeventssuchas
onkeydown
,
onkeypress
and
onkeyup
.
Tooltip
We will now briefly illustrate how to realize tooltip and layer functionality by Java-
Script in SVG. hree functions,
ShowTooltip
,
HideTooltip
, and
ZoomControl
, are defined in the script of Fig.
.
. he
ShowTooltip
func-
tion is called fromthe
onmousemove
attribute in the
<g>
element, whichincludes
<circle>
elements for data points. When the mouse cursor is moved over one of
thedata points, the
ShowTooltip
function isexecuted.Inthis function, the
text
and
rectangle
element grouped together as a tooltip (hidden in the initial state)
areupdated by JavaScript. At first, the id of the
<circle>
element indicated by the
mouse cursor is acquired, and the tooltip text is updated. he position of the mouse
cursor is then acquired, and the positions of the text and the rectangle are updated.
Finally, the
visibility
property of the
style
attribute of the tooltip is set to
visible.
he
HideTooltip
function is called from the
onmouseout
attribute of the
<g>
element. he process that is executed when the mouse cursor moves out of the
region associated with the element is described in the
onmouseout
attribute. his
