I want to define grouped shapes in the <def> section and display them via the <use> tag with the transformation-origin being the group's center. Following is a minimal example illustrating my issue:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<defs>
    <g id="triangle">
        <path fill="green" d="m 24 0 l 24 41.569 l -48 0 z" />
        <circle cx="24" cy="24" r="1" fill="red" />
        <rect width="48" height="41.569" fill="purple" fill-opacity="20%" />
    </g>
</defs>
<rect width="100" height="100" />
<rect fill="gray" x="100" width="100" height="100" />
<rect width="100" height="100" />
<rect fill="gray" y="100" width="100" height="100" />
<rect width="100" height="100" x="100" y="100" />
<use href="#triangle" transform-origin="50% 50%" transform="translate(100 100)"  />
</svg>

As it is my understanding, the triangle should be centered in the background. But in actuality, the top left corner of the group is centered.

I have tested my example against the MDN transform-origin one. The MDN one works well in the same environment (Edge Browser & VSCode). This lets me believe I am missing some side effects of the used tags or attributes

• Observed behavior
• Expected behavior

CodePudding user response：

• A scale transform has a centre point i.e. a point that doesn't change position.

• So does a rotation - there's a centre of rotation.

• A translate transform does not, every location moves. There's therefore no origin so transform-origin does nothing.