Building Web Applications with SVG - Cdn.oreilly.com

Modifying your code and experimenting
In this exercise, you’ll experiment with the circle you drew in the previous exercise by changing its
location, size, and color, rebuilding it so that only its outer boundary remains black.
1. Move the circle to the center of the screen. You do this by setting the x and y coordinates of
the center of the circle (cx and cy, respectively) to 50 percent, which is measured relative to the
width and height of the browser window.
2. Increase the radius and set it as a fixed proportion of the browser’s width.
Note A geometric attribute, such as cx, cy, or r in this case, can be set as either a
proportional value (relative to window size) or an absolute value (pixels, by default).
3. Change its color. You can do this by setting the fill attribute to a named color, or in a variety of
other ways (e.g., using CSS or HTML hexadecimal values, RGB values, or HSB values).
24 Building Web Applications with SVG