Graphery SVG

# Transform

The .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. .transform() receive a list pseudo-functions with parameters separated by space. With this pseudo-function, we define how we want to transform the graph.

# .transform('scale()')

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, and 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. .x(), .x1(), x2(), or .cx(), and .width() are affected by the x scale factor, and y and height are affected by y scale factor. Other attributes, as .r(), .stroke_width() are affected too by the x scale factor.

      # .transform('translate()')

      translate() transform moving a shape and accept two numerical values (x and y) separated by a whitespace or comma. As a result, the shape or group is moved along both the x and y axis. If the y is omitted, a 0 is assumed as value.

        # .transform('rotate()')

        rotate() will specify in degrees the shape's or group's rotation at its point of origin (x and y). You can include a x and y values after the angle (separated by a whitespace) and establish a new rotation's center (default values are 0 and 0).

          # .transform('skewX()') and .transform('skewY()')

          The elements can be skewed or made crooked using skewX() and skewY () transformation with a degree value than represents a skew transformation.

            # .transform('matrix()')

            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 matrix() transformation:

              ← Use CSS →