• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

5. Transforming the Coordinate System > Technique: Converting from Cartesian Co...

Technique: Converting from Cartesian Coordinates

If you are transferring data from other systems to SVG, you may have to deal with vector drawings that use Cartesian coordinates (the ones you learned about in high school algebra) to represent data. In this system, the (0, 0) point is at the lower left of the canvas, and y-coordinates increase as you move upwards. Figure 5-12 shows the coordinates of a trapezoid drawn with Cartesian coordinates.

Trapezoid drawn with Cartesian coordinates
Figure 5-12. Trapezoid drawn with Cartesian coordinates

Since the y-axis is “upside-down” relative to the SVG default, the coordinates have to be recalculated. Rather than do it by hand, you can use a sequence of transformations to have SVG do all the work for you. First, translate the picture into SVG, with the coordinates exactly as shown in Example 5-7. (We’ll also include the axes as a guide.) To nobody’s surprise, the picture will come out upside-down. Note that the image in Figure 5-13 is not left-to-right reversed, since the x-axis points the same direction in both Cartesian coordinates and the default SVG coordinate system.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint