Why Doesn\'t `transform-origin` Work Correctly on SVG Groups in Firefox?

Resolving transform-origin Issues in SVG Group for Firefox

Problem Statement

Setting transform-origin on an SVG group doesn't seem to have any effect in Firefox. While this works as intended in Webkit browsers, the transform-origin doesn't align properly when used in Firefox.

Code Example

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

Solution

To address this issue, it is recommended to draw the original SVG shape with its center at coordinate (0, 0). This involves shifting the origin of the shape to align correctly with the expected transform-origin.

Revised SVG

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect>

By placing the center of the shape at (0, 0), the transform-origin can now be correctly applied, resulting in the desired transformation behavior within Firefox.

The above is the detailed content of Why Doesn\'t `transform-origin` Work Correctly on SVG Groups in Firefox?. For more information, please follow other related articles on the PHP Chinese website!