Why Doesn\'t SVG Group `transform-origin` Work as Expected in Firefox, and How Can I Fix It?

SVG Group Transform-Origin Issue in Firefox: A Resolution

Firefox users may encounter difficulties using transform-origin on SVG groups. Despite attempts to center the origin, the desired transformation remains elusive. This problem stems from a unique SVG drawing style in Firefox.

To resolve this issue, draw the SVG shape with its center at the origin (0, 0):

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

Next, enclose the shape within a group and translate it to the desired position:

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

Now, CSS transitions can be applied to this group, including transform-origin, and should function correctly in Firefox:

#myObject {
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
    transform: rotate(360deg);
}

The above is the detailed content of Why Doesn\'t SVG Group `transform-origin` Work as Expected in Firefox, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!