Using SVG with CSS3 and HTML5

Chapter 11. Transformative Changes

Chapter 11. Coordinate System Transformations

When you define a coordinate system, using the viewBox and preserveAspectRatio attributes introduced in Chapter 8, you create an invisible grid that the browser fits into a rectangular space. When you transform a coordinate system, you pick up that grid and move, twist, or stretch it. Any shapes, text, or images drawn in the transformed coordinate system are moved, twisted, or stretched to match.

This chapter introduces the SVG transform attribute, and examines the ways in which you can work with the SVG coordinate system to make the most of transformations.

Like the nested coordinate systems created with <svg> and <symbol>, transformations allow you to reposition your origin or change the scale of your units. But transformations don’t stop there.

Transformations can change the definition of what “horizontal” or “vertical” means. This means you can draw rectangles and ellipses that don’t align with the browser window, without having to use <path> notation and trigonometry.

Furthermore, while new coordinate systems must be defined with a separate <svg> or <symbol> element, a transform can be applied directly—as an attribute—on individual shapes or on groups. This makes transformations incredibly flexible, and they are widely used in SVG.

Since transformations control the geometry of your drawing, transform was originally defined as a core XML attribute. However, transformations are so useful that web ...