HTML and CSS Reference
In-Depth Information
You'll store the path definitions in an SQL Server database. I'll show you how to access the database using a
model class and then display it using a view definition. Once you have the map displayed, I'll show you some CSS
tricks to style the map using both static and dynamic styles. Finally, you'll add some animation to add a little flair
to your web page.
Using Path Elements
The path element is the most versatile of all SVG elements. It is a collection of
MoveTo
,
LineTo
, and various
CurveTo
commands. The shape is drawn by following the path commands. Each command starts from the
current position and either moves to a new position or draws a line to the next position. For example:
•
Move to 25, 50
•
Draw a line to 50, 50
•
Draw a line to 50, 25
•
Draw an arc to 25, 50
This is expressed as:
<path d="M25,50 L50,50 L50,25 A25,25 0 0,0 25,50 z" />
The “move to” and “line to” commands are pretty straightforward. The “arc to” command, as well as all the
other curve commands, is more complicated because you need to provide additional control points that describe
how the curve should be drawn. Each command uses a single letter as shown in Table
9-1
.
Table 9-1.
The available path commands
Command
Abbr.
Description
Move to
M
Move to the specified position
Line to
L
Draw a line to the specified position
Horizontal line to
H
Draw a horizontal line to the specified x coordinate
Vertical line to
V
Draws a vertical line to the specified y coordinate
Arc to
A
Draws an arc to the specified position
Curve to
C
Draws a cubic Bezier curve
Shorthand curve to
S
Draws a simplified cubic Bezier curve
Quadratic curve to
Q
Draws a quadratic Bezier curve
Shorthand quadratic curve to
T
Draws a simplified quadratic Bezier curve
Close path
Z
Close the figure by drawing a line to the starting position
For each of these commands, an uppercase letter is used when absolute coordinates are used.
You can also specify relative coordinates and use a lowercase letter to indicate the values are relative to
the current position. For more information about constructing a path element, see the article at
