In this demo you can choose an element defining the clipping path and an element to be clipped. You choose the element to be clipped in the selection on the left. A few clipping paths are defined in the 'defs' area of the svg. Each path has its ID, e.g. id="test1". To use the path (for example test1), set clip-path="url(#test1)" in the clipped element definition. On the bottom of the svg replace the rectangle by the clipping shape and remain the dash. The dash will show you the clipping path.
You can change the code as you like. You can add additional clip-path elements. You can add additional elements to be clipped. Note that you can write more than one element inside the clippath.
Try to define instead of clip-path presentation attribute, CSS style clip-path property:
<g style="clip-path: url(#test)">...</g>
You can see that it is the same as using SVG attribute. You can use this 'clip-path' CSS property in CSS for HTML elements too (new feature - see can I use).