Visualia

matrix

All the SVG transforms are based on the matrix() function. It applies transformation matrix to an element:

Function signature

function matrix(
  a: number = 1, // scaleX
  b: number = 0, // skewY
  c: number = 0, // skewX
  d: number = 1, // scaleY
  e: number = 0, // translateX
  f: number = 0 // translateY
): string;

Usage

Let's set up a local variable m as an object with default matrix values a, b, ... and create a SVG rectangle that we transform with a matrix() function:

<script setup>
  ref: m = {
    a: 1,
    b: 0,
    c: 0,
    d: 1,
    e: 0,
    f: 0
  }
</script>

> <v-slider v-model="m.a" min="-4" max="4" step="any" />

> a / scaleX:
> {{ m.a }}

<!-- ...other matrix parameters... -->

<svg height="400" width="400">
  <rect x="150" y="150" width="100" height="100" fill="black" />
  <rect transform-origin="200 200" x="150" y="150" width="100" height="100" fill="red" opacity="0.5"
    :transform="matrix(m.a,m.b,m.c,m.d,m.e,m.f)"
  />
</svg>

a / scaleX:
1

b / scewY:
0

c / scewX:
0

d / ScaleY:
1

e / translateX:
0

f / translateY:
0

See more

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#matrix

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()