Building Web Applications with SVG - Cdn.oreilly.com

Collage involving <rect> , <circle> and <ellipse>
The element, like the , can have fill, stroke, stroke-width, and other attributes.
The x and y attributes specify the rectangle’s upper-left corner, and height and width specify
its size. Because you want the top of the rectangle to coincide with the center of the window,
you can set x to “50%”. You also want it centered on the screen horizontally, so the distance of
its rightmost extent (specified by x + width) to the right edge of the window should equal x.
By experimenting a bit with different values of x and the corresponding value of width (determined
by the centering constraint), you can visually estimate the values above (or similar values).
Note that 100% – (80% + 10%) = 10%, which means that the rectangle will be centered
horizontally, even though it is not centered vertically. The values for stroke-width and fill can
likewise be estimated through experimentation.
7. Put an oval atop everything and fill it with a transparent shade of yellow, while keeping its
stroke opaque:
Collage involving <rect> , <circle> and <ellipse>
An ellipse, like a circle, has a center defined by cx and cy. However, owing to the difference
in its vertical and horizontal extents, it has two radii: ry and rx, respectively. Because this oval
is taller than it is wide, you can approximate the values above fairly closely by testing a few
values and seeing what happens. Alternatively, you could actually measure the drawing on the
screen to duplicate the effect more precisely.
28 Building Web Applications with SVG