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 SVG's viewBox attribute

<clipPath viewBox="0 0 140 180" transform={`scale(${1 / 140}, ${1 / 180})`}/>

Test

1<clipPath viewBox="0 0 140 180" transform={`scale(${1 / 140}, ${1 / 180})`}/>

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