Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow

softmarshmallow/svg-g-transform.svg

Created August 16, 2025 12:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save softmarshmallow/f24a970ec2c90b6e4235d255f4d551c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save softmarshmallow/f24a970ec2c90b6e4235d255f4d551c0 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
svg-g-transform.svg
<!-- Group rotation rotates all children about the group's pivot;
a child's own rotation is then applied relative to that. -->
<svg width="660" height="230" viewBox="0 0 660 230" xmlns="http://www.w3.org/2000/svg" style="background:#fff">
<style>
.label{font:12px system-ui; fill:#555}
.pivot{stroke:#888; stroke-dasharray:4 3}
</style>
<!-- Column 1: no group rotation -->
<text class="label" x="30" y="20">1) No group rotation</text>
<g>
<rect x="60" y="80" width="60" height="40" fill="#82cfff"/>
<!-- child-only rotation (about its own center) -->
<rect x="130" y="70" width="60" height="60" fill="#ff7b7b"
transform="rotate(30 160 100)"/>
</g>
<!-- Column 2: group rotation (children rotate as a block about pivot 300,110) -->
<text class="label" x="240" y="20">2) Group rotation 30° about (300,110)</text>
<!-- pivot marker -->
<g class="pivot">
<line x1="300" y1="0" x2="300" y2="230"/>
<line x1="200" y1="110" x2="400" y2="110"/>
</g>
<circle cx="300" cy="110" r="3" fill="#666"/>
<g transform="rotate(30 300 110)">
<rect x="260" y="80" width="60" height="40" fill="#82cfff"/>
<rect x="330" y="70" width="60" height="60" fill="#ff7b7b"/>
</g>
<!-- Column 3: group rotation + one child also rotated locally -->
<text class="label" x="450" y="20">3) Group rotation + child local rotation</text>
<!-- pivot marker -->
<g class="pivot">
<line x1="500" y1="0" x2="500" y2="230"/>
<line x1="400" y1="110" x2="600" y2="110"/>
</g>
<circle cx="500" cy="110" r="3" fill="#666"/>
<g transform="rotate(30 500 110)">
<rect x="460" y="80" width="60" height="40" fill="#82cfff"/>
<!-- child rotates around its own center (570,110), after the group's rotation -->
<rect x="530" y="70" width="60" height="60" fill="#ff7b7b"
transform="rotate(45 560 100)"/>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment