How transform-origin Affects SVG Rotation Center

The transform-origin CSS property determines the exact pivot point around which an SVG element rotates. Unlike standard HTML elements, which default to rotating around their own center, SVG elements default to rotating around the top-left corner of the parent SVG coordinate system. Understanding how transform-origin interacts with SVG viewports and the transform-box property allows developers to precisely control whether an element spins around its own center, orbits a specific coordinate, or rotates relative to the entire canvas.

Default SVG Rotation Behavior

When applying a CSS rotation (transform: rotate(...)) to a standard HTML element, the default transform-origin is 50% 50% (its center). However, SVG rendering follows the SVG coordinate system where the default origin is 0 0—the top-left corner of the <svg> canvas.

Without a declared transform-origin, rotating an SVG shape causes it to sweep along a wide arc around the canvas origin rather than spinning in place.

Specifying Coordinates for transform-origin

You can alter the rotation center by providing explicit coordinate values to transform-origin:

• Absolute Values (px): Setting transform-origin: 100px 100px; places the rotation pivot at the fixed coordinate (100, 100) within the SVG coordinate space.
• Keywords: Using keywords like transform-origin: center; or transform-origin: top right; positions the origin relative to the defined bounding box.
• Percentages: Setting transform-origin: 50% 50%; indicates the middle of the reference box.

The Role of transform-box

When using percentages or keywords for transform-origin in SVG, the browser needs to know what reference box to measure against. This is controlled by the transform-box property:

• transform-box: view-box; (Default): Percentages resolve relative to the entire SVG viewport. Setting transform-origin: 50% 50% will pivot the element around the center of the whole SVG canvas, not the element itself.
• transform-box: fill-box;: Percentages resolve relative to the object’s own bounding box. Setting transform-origin: center; transform-box: fill-box; forces the element to rotate directly around its own geometric center.

CSS vs. SVG transform Attributes

SVG also supports native rotation via the SVG transform attribute: transform="rotate(angle, cx, cy)". In this syntax, cx and cy explicitly declare the rotation center coordinates directly in the SVG markup, bypassing CSS transform-origin.

When styling with CSS, modern best practice for rotating an individual SVG element around its own center is combining CSS transforms with transform-box:

.rotating-element {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}