HTML and CSS Reference
In-Depth Information
<g transform="rotate(-5,75,75)">
<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"/>
</g>
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
transforms are shown in
Table 14-1
:
Table 14-1:
Transform Properties
Transform
Description
Move the element
tx
and
ty
units to the right and down. If
ty
is left out, it is
assumed to be 0.
translate(tx,ty)
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.
scale(sx, sy)
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)
translate(-cx,-y)
.
rotate(angle)rotate(angle,
cx, cy)
Less useful for games, this does either a horizontal or vertical skew.
skewX(angle)skewY(angle)
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.
matrix(a,b,c,d,e,f)
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
.