Any idea why the rotation does not seem to take place in the clip path coordinates? 0.5 0.5 should denote the center of the shape, i.e. where the two squares meet.
svg {
background: green;
}<svg width="100" height="100" viewBox="0 0 100 100">
<clipPath id="rel" clipPathUnits="objectBoundingBox" transform="rotate(20 0.5 0.5)">
<rect width="0.5" height="0.5"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5"/>
</clipPath>
<rect width="100" height="100" x="0" y="0" clip-path="url(#rel)" fill="red"/>
</svg>I expected to see something like this:
svg {
background: green;
}<svg width="100" height="100" viewBox="0 0 100 100">
<clipPath id="abs" transform="rotate(20 50 50)">
<rect width="50" height="50"/>
<rect x="50" y="50" width="50" height="50"/>
</clipPath>
<rect width="100" height="100" x="0" y="0" clip-path="url(#abs)" fill="red"/>
</svg>