Implementing Rectangle Rotation Around Its Own Center in SVG: Methods and Principles

Fundamental Principles of SVG Rotation Mechanism

In SVG, element rotation is achieved through the transform attribute, where the rotate() function accepts three parameters: rotation angle, x-coordinate of the rotation center, and y-coordinate of the rotation center. When only the angle is provided, the rotation center defaults to the origin (0,0) of the current user coordinate system. To rotate a rectangle around its own center, the rotation center coordinates must be precisely calculated and specified.

Calculation Method for Rotation Center

For a rectangle element, its center point coordinates can be calculated using the following formulas:

centerX = rectX + (rectWidth / 2)
centerY = rectY + (rectHeight / 2)

In the example provided in the question, the rectangle is defined as:

<rect x="10" y="10" width="120" height="120" />

Applying the formulas:

centerX = 10 + (120 / 2) = 70
centerY = 10 + (120 / 2) = 70

However, in the transform attribute, rotation center coordinates should be relative to the rectangle's own coordinate system. When the rectangle is positioned at (10,10), the origin of its own coordinate system is (10,10). Therefore, in the rotate() function, the rotation center should be calculated relative to this origin:

rotateCenterX = rectWidth / 2 = 60
rotateCenterY = rectHeight / 2 = 60

Implementation Code Example

Based on the analysis above, the correct implementation code is:

<svg>
  <defs>
    <rect id="myRect"
          x="10"
          y="10"
          height="120"
          width="120"
          stroke-width="2px"
          stroke="red"
          fill="blue" />
  </defs>

  <g transform="translate(100,30)">
    <use xlink:href="#myRect" />
  </g>

  <g transform="translate(100, 100) rotate(45 60 60)">
    <use xlink:href="#myRect" 
         stroke="green" 
         fill="yellow" />
  </g>
</svg>

The key here is the last two parameters in rotate(45 60 60): 60 represents half of the rectangle's width and height, i.e., the center point coordinates relative to the rectangle's own coordinate system origin.

Comparative Analysis with Other Methods

In addition to the native SVG method, similar effects can be achieved using CSS:

<style>
  .rotate-rect {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(45deg);
  }
</style>

This method specifies the rotation center via CSS's transform-origin property, but attention must be paid to browser compatibility and differences between SVG and CSS coordinate systems.

Dynamic Calculation of Rotation Center

When rectangle positions are uncertain or require dynamic adjustment, the rotation center can be calculated using JavaScript:

function getRotationCenter(rectElement) {
  const bbox = rectElement.getBBox();
  return {
    x: bbox.x + (bbox.width / 2),
    y: bbox.y + (bbox.height / 2)
  };
}

// Usage example
const rect = document.getElementById('myRect');
const center = getRotationCenter(rect);
rect.setAttribute('transform', `rotate(45 ${center.x} ${center.y})`);

This approach is particularly useful for complex or dynamically generated SVG graphics.

Practical Considerations in Application

In practical development, the following points should be noted:

1. When a rectangle has been translated, rotation center calculation must consider both the original position and the transformation matrix
2. When nesting <g> elements, the coordinate system for rotation centers is affected
3. When using <use> elements for references, rotation centers should be relative to the referenced element's coordinate system
4. Different browsers may have subtle variations in SVG transform support

Conclusion

The core of implementing rectangle rotation around its own center in SVG lies in correctly understanding SVG's coordinate system and the parameter mechanism of the rotate() function. By precisely calculating rotation center coordinates, the desired rotation effect can be ensured. Developers should choose appropriate methods based on specific scenarios: for static graphics, direct coordinate calculation is most efficient; for dynamic content, combining with JavaScript calculation offers greater flexibility; when needing to coordinate with CSS animations, CSS transform properties may be considered.