.transform() method defines a group of transformation on an element or group of elements.
With these transformations, we can scale, rotate, move or deform the SVG elements.
receive a list pseudo-functions with parameters separated by space. With this pseudo-function, we
define how we want to transform the graph.
scale() transform resizes the SVG element. This parameter accepts one or two values with
the horizontal and vertical scaling amounts. If one of them is omitted, both values(x and y) take
the same. These measures are a multiple of the original value, so
0.5 reduces the size by half,
2 doubles the original size.
It's important to understand the effect of
scale() on the shape. The scaling process change
shape's size, position, and stroke.
affected by the
x scale factor, and
height are affected by
y scale factor.
Other attributes, as
.stroke_width() are affected too by the
x scale factor.
translate() transform moving a shape and accept two numerical values (
y) separated by
a whitespace or comma. As a result, the shape or group is moved along both the
y is omitted, a
0 is assumed as value.
rotate() will specify in degrees the shape's or group's rotation at its point of origin (
y). You can include a
y values after the angle (separated by a whitespace) and
establish a new rotation's center (default values are
# .transform('skewX()') and .transform('skewY()')
The elements can be skewed or made crooked using
skewY () transformation with a
degree value than represents a skew transformation.
All previous transforms can be described as a
matrix() transform. This matrix transform receive
six values as
matrix(a b c d e f) and is equivalent to applying this transformation matrix:
a c e (b d f) 0 0 1
If we have a rectangle with these values:
x = 10 y = 10 width = 30 height = 20
we obtain these X and Y points:
topLeftX = x // 10 topLeftY = y // 10 topRightX = x + width // 10 + 30 = 40 topRightY = y // 10 bottomLeftX = x // 10 bottomLeftY = y + height // 10 + 20 = 30 bottomRightX = x + width // 10 + 30 = 40 bottomRightY = y + height // 10 + 20 = 30
When we apply this transform function:
rect.transform('matrix(3 1 1 3 -20 -30');
that is, this matrix values;
a = 3, c = 1, e = 30, b = 1, d = 3, f = 40
these operations are executed:
newTopLeftX = (topLeftX * a) + (topLeftY * c) + e // 10 newTopLeftY = (topLeftX * b) + (topLeftY * d) + f // 30 newTopRightX = (topRightX * a) + (topRightY * c) + e // 40 newTopRightY = (topRightX * b) + (topRightY * d) + f // 30 newBottomLeftX = (bottomLeftX * a) + (bottomLeftY * c) + e // 20 newBottomLeftY = (bottomLeftX * b) + (bottomLeftY * d) + f // 10 newBottomRightX = (bottomRightX * a) + (bottomRightY * c) + e // 110 newBottomRightY = (bottomRightX * b) + (bottomRightY * d) + f // 40
In practice, all these operations are performed internally, and it is very simple to apply a