Clip paths relative to their container

Step 1

Add clipPathUnits="objectBoundingBox" to your <clipPath/> element. This makes the clip-path use your elements bounding-rect for sizing (instead of the original size of the SVG)

Step 2

Add transform="scale(width, height)" to your <clipPath/> element. You have to scale the original SVG's coordinate so that every location fits between 0 – 1.

An easy way to do this is to use the numbers in the SVG's viewBox attribute

Step 3

Fix the aspect ratio of the element being clipped, to the SVG's original aspect ratio. This helps the SVG mask being stretched