Graphics Reference
In-Depth Information
Text
Text can be realized in SVG using the
<text>
element, which has the attributes
x
and
y
that determinetheposition atwhichthestring inthetextnodeenclosed bythe
<text>
element is displayed. Figure
.
shows a simple example of text in SVG.
Various propertiesof text,such asfont size,family, weight, and color, arespecified
using the
style
attribute. he shape of the text in SVG is controlled by the font
border and the area inside the border, which can be specified in various ways, as
shown by the third string in the example. he
text-anchor
property is used to
determine how the string is positioned with respect to the text position specified by
the
x
and
y
attributes (in other words, whether the text position corresponds to the
start, the middle, or the end of the string).
Group
One of the advantages of vector graphics is that layers can be included. In SVG, layer
functionality is realized using the group element
<g>
.his means that elements that
are grouped by the
g
element are considered to be one layer. By using
<g>
elements
appropriately, it is possible to turn a specific layer on and off,and apply styles and in-
teractive functions (asdescribedinthenextsection) toalloftheelements inthelayer
collectively. Figure
.
shows a simple scatter plot obtained using the
<g>
element.
he data points (circle elements) are collected into one layer using one
<g>
el-
ement that has a
style
attribute which is reflected in all of the data points. he
size of an SVG file that includes several elements, such as a scatter plot with several
data points, is significantly increased when the
style
attribute is specified for each
<circle>
element. herefore,it is desirable to minimize the size of the SVG file by
using the
<g>
element.
Implementation of Interactive Functionality
via JavaScript
18.3.3
As stated earlier in this section, interactive functions other than those supported by
default in SVG browsers (such as zooming), can be implemented using JavaScript.
VBScript is also available in some SVG browsers. All of these languages are Docu-
ment Object Model (DOM)-compliant. In other words, all of these languages define
Figure
.
.
Text elements
