HTML and CSS Reference
<rect id="rect" x="50" y="50" rx="5" ry="5"
width="50" height="50" fill="black" />
<circle id="circle" cx="75" cy="75" r="10" fill="#CCC"/>
<path d="M 50 50 L 75 50 L 75 0 z"
fill="black" stroke="#CCC" stroke-width="2"/>
<polygon points="75,50 100,50 75,0"
fill="#CCC" stroke="black" stroke-width="2"/>
All the elements inside of the <g> tag are rotated by -5 degrees around a center of 75 , 75 . Using groups
allows you to define complicated subshapes that can be easily animated.
Transforming SVG Elements
All the elements discussed share an attribute called transform that enables SVG elements to be arbitrarily
positioned, rotated, and scaled, much like the transform property available in CSS3.
The transform property takes a list of transforms to apply in sequence, one after the other. The available
Table 14-1: Transform Properties
Move the element tx and ty units to the right and down. If ty is left out, it is
assumed to be 0.
Scale the element sx times in the horizontal direction and sy times in the vertic-
al direction. If sy is left out, it is assumed to be the same as sx . The number can
be greater than 1 to make the element larger and less than 1 to make it smaller.
Rotate the element by angle degrees. If cx and cy are provided, the element is
rotated around that point; if not it is rotated around 0,0. Supplying a cx and cy
is a shortcut to calling translate(cx,cy) rotate(angle)
Less useful for games, this does either a horizontal or vertical skew.
This enables you to perform an arbitrary 2-D transformation using a 3 × 3 mat-
rix. In 2-D, the row of the matrix is always 0,0,1 so only 6 values a-f need to be
specified. Each of the preceding transforms can be expressed in matrix form, so
setting the matrix explicitly provides a shortcut for applying arbitrary transforms.
Applying Strokes and Fills
All the vector elements shown previously can be given a stroke, which defines how the outline of the element is
drawn, and a fill, which defines what the interior of the object looks like. ( <polyline> s don't have interiors,
so the fill doesn't apply.)
There are many stroke and fill properties available, but the most common ones are shown in Table 14-2 .