List of Transformation Functions

Q

What are transformation functions?

✍: FYIcenter.com

A

SVG supports 5 transformation functions: translate(), rotate(), scale(), skew(), and matrix().

1. matrix(a, b, c, d, e, f) - Transform the object coordinates by applying a 2-d matrix with the first 4 parameters and followed by a 2-d translation with the last 2 parameter:

```x' = a*x + b*y + e
y' = b*y + d*y + f
```

2. rotate(d, cx, cy) - Transform the object coordinates by rotating them around (cx,cy) for d degree clockwise:

```x' = (x-cx)*cos(d*PI/180) - (y-cy)*sin(d*PI/180) + cx
y' = (x-cx)*sin(d*PI/180) + (y-cy)*cos(d*PI/180) + cy
```

3. scale(sx, sy) - Transform the object coordinates by scaling x with sx and y with sy:

```x' = sx*x
y' = sy*y
```

4. skewX(d) - Transform the object coordinates by pushing the y-axis d degree:

```x' = x + y*tan(d*PI/180)
y' = y
```

5. skewY(d) - Transform the object coordinates by pushing the x-axis d degree:

```x' = x
y' = x*tan(d*PI/180) + y
```

6. translate(dx, dy) - Transform the object coordinates by moving the origin to the given location:

```x' = x + dx
y' = y + dy
```

2023-08-03, 368🔥, 0💬