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

2. Coordinates > Nested Systems of Coordinates

Nested Systems of Coordinates

You can establish a new viewport and system of coordinates at any time by putting another <svg> element into your document. The effect is to create a “mini-canvas” upon which you can draw. We used this technique to create illustrations such as Figure 2-5. Rather than drawing the rectangles, then rescaling and positioning the cat inside each one (the brute force approach), we took these steps:

  • Draw the blue rectangles on the main canvas

  • For each rectangle, define a new <svg> element with the appropriate preserveAspectRatio attribute

  • Draw the cat into that new canvas (with <use>), and let SVG do the heavy lifting

Here’s a simplified example that shows a circle on the main canvas, then inside a new canvas that’s outlined by a blue rectangle that’s also on the main canvas. Figure 2-8 is the result we wish to achieve.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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