HTML and CSS Reference
In-Depth Information
■
The
width
and
height
attributes define the element's intrinsic dimensions. In IE9, you can omit these and
the page will render correctly based on the actual space used. With other browsers, if the
width
and
height
are not
specified the image will be clipped to some default size.
Note
Inside the
svg
element add the following elements. These are just simple shapes; mostly
circle
elements
with a rectangle (
rect
),
line
, and
polygon
.
<circle class="body" cx="50" cy="171" r="40" />
<circle class="body" cx="50" cy="103" r="30" />
<circle class="body" cx="50" cy="50" r="25" />
<line class="hat" x1="30" y1="25" x2="70" y2="25" />
<rect class="hat" x="40" y="10" width="20" height="15" />
<circle class="button" cx="50" cy="82" r="4" />
<circle class="button" cx="50" cy="100" r="4" />
<circle class="button" cx="50" cy="118" r="4" />
<circle class="eye" cx="42" cy="42" r="4" />
<circle class="eye" cx="58" cy="42" r="4" />
<polygon class="nose" points="45,60 45,50 60,55" />
A
circle
is expressed as a center point,
cx
and
cy
, and a radius,
r
. A
line
is specified as a beginning point,
x1
and
y1
, and an endpoint,
x2
and
y2
. A rectangle (
rect
) element is described by the top-left corner location,
x
and
y
, a
width
, and a
height
. A
polygon
is defined by a set of points in the form
of x1,y1 x2,y2 x3,y3
. You
can specify any number of points. It is rendered by drawing a line segment between each of these points and a
line segment from the last point, back to the first point.
Save your changes and press F5 to view the web page, which should look like Figure
9-2
.
Figure 9-2.
The initial SVG image without styling
