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.
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
Search WWH ::

Custom Search