SVG clipPath and transformations

Question

I have two nearly identical pieces of code where the right half of a circle should be clipped according to a rectangle. In the first example, all works well:

Answer 1

You can still use a "g" tag like that to make it work.

<g clip-path="url(#cut)">
 <circle class="consumption" transform="translate(100,100)" r="50"></circle>
</g>

Answer 2

Because the transform applies to the clipPath too.

From the SVG specification...

If clipPathUnits="userSpaceOnUse", the contents of the ‘clipPath’ represent values in the current user coordinate system in place at the time when the ‘clipPath’ element is referenced (i.e., the user coordinate system for the element referencing the ‘clipPath’ element via the ‘clip-path’ property). If attribute ‘clipPathUnits’ is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.