HTML and CSS Reference
In-Depth Information
<rect x="150" y="150" width="50" height="50" class="water"></rect>
<rect x="250" y="150" width="50" height="50" class="water"></rect>
</svg>
Then you style the common elements with
CSS
in the
<head>
of your
document in the usual way:
<style>
rect.earth { fill: rgb(0,127,0); }
rect.water { fill: rgb(0,0,255); }
</style>
Drawing common shapes
Let's carry on and re-create the rest
of the
<canvas>
example shapes in
SVG
. In addition to the rectangle
and line elements you've seen
already,
SVG
has elements for circles
and arbitrary polygons.
For a circle, you need to provide the
x and y coordinates of the center and
the radius as appropriate attributes.
A polygon is slightly more complex; it has an attribute
points
that you
use to supply a space-separated list of x,y coordinates. This code, when
placed inside the
<svg>
element from the listing in the introduction, gen-
erates the previous image:
<rect x="5" y="50" width="100" height="100"
style="fill: rgb(255,0,0);"></rect>
<line x1="5" y1="50" x2="105" y2="150"
style="stroke: rgb(0,127,127); stroke-width: 5;"></line>
<circle cx="165" cy="100" r="50"
style="fill: rgb(0,255,0);"></circle>
<polygon points="265,50 315,150 215,150"
style="stroke: rgb(51,51,51); fill: rgb(204,204,204);
stroke-width: 5;"></polygon>
With the
polygon
element you don't have to provide the starting point a
second time; it assumes the shape is closed, and the path drawn returns
to the first point. If you want to draw an open shape, you can use the
