|
|
Perhaps you remember the Cartesian coordinate system from one of your high school mathematics classes. The Cartesian coordinate system (also called the Euclidean coordinate system) allows you to specify any point in the Euclidean plane by means of a pair of numbers. The first number represents the horizontal value and the second number represents the vertical value. Often you'll see a pair of perpendicular line segments that represent the Cartesian coordinate system. The horizontal axis is labeled the x-axis, and positive values on the x-axis are to the right of the vertical axis (i.e., toward the right). The vertical axis is labeled the y-axis, and positive values on the y-axis are above the horizontal axis. The origin is the intersection point of the x-axis and the y-axis.
The situation is almost the same in the SVG coordinate system. The x-axis is horizontal and the positive direction is toward the right. The y-axis is vertical, but the positive direction is downward (i.e., south). As you can see, the positive y-axis points in the opposite direction of most graphs in a typical mathematics textbook. When we draw our graphics images, we'll have to consider this fact. This detail is easy to forget, and often it's the underlying cause of incorrect images.
Two more details about the SVG coordinate system: the origin is the upper-left corner of the screen, and the unit of measurement is the pixel, so the largest visible display is usually 1024x728.
Consider Figure 1.1, it displays the SVG coordinate system with four rendered points. Note that the coordinate system has been shifted downward and to the right in order to render the horizontal and vertical axes more clearly.
Figure 1.1: The SVG coordinate system.
Based on the definition of the SVG coordinate system, we now know that:
point A(50, 50) is 50 units to the right and 50 units downward
point B(200, 50) is 200 units to the right and 50 units downward
point C(50, 100) is 50 units to the right and 100 units downward
point D(200, 100) is 200 units to the right and 100 units downward
|
|