Game Development Reference
In-Depth Information
cy="200"
rx="75"
ry="75"
fill="#a0a" />
</svg>
With those basic shapes out of the way, we will now proceed to drawing more com-
plex shapes. Instead of just following a few predefined points and lengths, we now
get to choose exactly where each point goes in the shapes we'll be drawing. While
this makes it slightly harder to draw shapes by hand, it also makes the possibilities
much more extensive.
Drawing a line is both simple and fast. Simply specify two points within the SVG co-
ordinate space, and you have a line. Each point is specified by an enumerated (x, y)
pair.
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
<line
x1="50"
y1="50"
x2="300"
y2="500"
stroke-width="50"
stroke="#c00" />
</svg>
Next we'll cover the polyline, which is an extension of a regular line. The difference
between a line and a polyline is that, as the name implies, a polyline is a collection
of lines. While a regular line only takes in two coordinate points, a polyline takes two
or more points, with a line connecting them in order. Also, if we specify a fill color
for the polyline, the last point will be connected to the first, and the shape formed by
that enclosed area will have the fill applied to it. Obviously, if no fill is specified, the
polyline is rendered as a simple shape made out of nothing but straight lines.
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
