Clip Path Is Moving With Group Of Elements When Using D3.drag

I'm trying to drag a group of shapes on a clipped path. For the first time, It works fine, but as soon as I started dragging, clipping does not work at all. Here is my working code

Solution 1:

The drag callback is transforming the same g element that the clip path has been applied to. This means that the g element's clip path is also being transformed, which is why the clipped shape is moving around as you drag your shape.

The snippet below uses a grey rectangle to show the clip path definition, and a pink rectangle to show the area of the transformed g element. The circle is retaining the original clip shape because the g element's clip path is being translated along with the rest of the element.

<svg width="300" height="300">
  <clipPath id="cut">
    <rect width="100" height="100" x="100" y="50"></rect>
  </clipPath>
    
  <rect x="100" y="50" width="100" height="100" fill="#eee"></rect>
    
  <g clip-path="url(#cut)" transform="translate(50, 50)">
    <rect x="100" y="50" width="100" height="100" fill="pink"></rect>
    <circle       
      class="consumption"
      cx="100" 
      cy="100" 
      r="50">
    </circle>
  </g>
</svg>

In the snippet below, a clip path is applied to an outer g element (which is not translated and has the same co-ordinates as the original clip path definition), while the transformation is applied to an inner g element.

<svg width="300" height="300">
  <clipPath id="cut">
    <rect width="100" height="100" x="100" y="50"></rect>
  </clipPath>
    
  <rect x="100" y="50" width="100" height="100" fill="#eee"></rect>
    
  <g clip-path="url(#cut)">
    <rect x="100" y="50" width="100" height="100" fill="pink"></rect>
      
    <g transform="translate(100, 50)">
      <circle       
        class="consumption"
        cx="100" 
        cy="100" 
        r="50">
      </circle>
    </g>
  </g>
</svg>

So, as shown in the example you should apply the clip path to an outer g element, while transforming an inner g element.