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.

<svgwidth="300"height="300"><clipPathid="cut"><rectwidth="100"height="100"x="100"y="50"></rect></clipPath><rectx="100"y="50"width="100"height="100"fill="#eee"></rect><gclip-path="url(#cut)"transform="translate(50, 50)"><rectx="100"y="50"width="100"height="100"fill="pink"></rect><circleclass="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.

<svgwidth="300"height="300"><clipPathid="cut"><rectwidth="100"height="100"x="100"y="50"></rect></clipPath><rectx="100"y="50"width="100"height="100"fill="#eee"></rect><gclip-path="url(#cut)"><rectx="100"y="50"width="100"height="100"fill="pink"></rect><gtransform="translate(100, 50)"><circleclass="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.