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
Move to
Move to the specified position
Line to
Draw a line to the specified position
Horizontal line to
Draw a horizontal line to the specified x coordinate
Vertical line to
Draws a vertical line to the specified y coordinate
Arc to
Draws an arc to the specified position
Curve to
Draws a cubic Bezier curve
Shorthand curve to
Draws a simplified cubic Bezier curve
Quadratic curve to
Draws a quadratic Bezier curve
Shorthand quadratic curve to
Draws a simplified quadratic Bezier curve
Close path
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 .
Search WWH ::

Custom Search