Dynamic graphics - HTML5 and CSS3 - page 100

<polyline> element instead; it uses an identical points attribute but
doesn't close the path around the shape.

<polygon
points="265,50 315,150 215,150"
style="stroke: rgb(51,51,51);
fill: rgb(204,204,204);
stroke-width: 5;">
</polygon>

<polyline
points="265,50 315,150 215,150"
style="stroke: rgb(51,51,51);
fill: rgb(204,204,204);
stroke-width: 5;">
</polyline>

You've seen several elements
make different shapes in a single
SVG drawing, but there's also a
way to draw several different
shapes in a single SVG element.
For this you use the <path>
element. Let's look at an example.

alThough you can see three shapes in the previous image, they're a
single SVG element: a path. The <path> element in SVG is very
powerful. here's the code:

The <path> element works as if it was
an imaginary pen. you then use the
attribute to pass a series of commands
to the pen to tell it what to draw.

<path d="M5,50

l0,100 l100,0 l0,-100 l-100,0

Move to coords 5,50.

Draw a line to - 100,0
relative to the current
position.

M215,100 Uppercase letters mean

absolute coordinates.

a50,50 0 1 1 -100,0 50,50 0 1 1 100,0

Lowercase letters mean
coordinates relative
to the current pen
position.

M265,50

Draw two arcs to make a
circle.

l50,100 l-100,0 l50,-100

z"
style="stroke: rgb(51,51,51);
fill: rgb(204,204,204);
stroke-width: 5;"/>

Close the path.