Transformations with the transform Attribute

The transform attribute defines a list of transform definitions that are applied to an element and the element's children.

Example

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
    fill="grey"
    transform="rotate(-10 50 100)
               translate(-36 45.5)
               skewX(40)
               scale(1 0.5)">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>

Transform Functions

The following transform functions can be used by the transform attribute <transform-list>:

matrix(a, b, c, d, e, f)
translate(x [y])
scale(x [y])
A scale operation by x and y. If y is not supplied, it is assumed to be equal to x.
rotate(a [y y])
It specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y)
SkewX
A skew transformation along the X axis by a degrees.
SkewY
A skew transformation along the Y axis by a degrees.

transform-origin

The transform-origin SVG attribute sets the origin for an item's transformations. You can use this attribute with any SVG element.

The transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If a single <length> or <percentage> value is defined, it represents the horizontal offset.

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset.

One-value syntax
The value must be a <length>, or one of the keywords left, center, right, top, and bottom.
Two-value syntax
One value must be a <length>, a <percentage>, or one of the keywords left, center, and right. The other value must be a <length>, a <percentage>, or one of the keywords top, center, and bottom.
Three-value syntax
The first two values are the same as for the two-value syntax. The third value must be a <length>. It always represents the Z offset.