Is it possible to make a SVG clipPath with a responsive?

Question

I am trying to make a responsive SVG with a bitmap pattern and a sort of complex shape with clipPath.

If I use a instead of a <

Answer 1

Convert your <clipPath> to use clipPathUnits="objectBoundingBox". When using objectBoundingBox units, your clip path coords map to the bounding box of the element they are being applied to. (0,0) maps to the top left of the element. (1,1) maps to the bottom right.

You'll need to redefine your path (or apply a transform to convert the coords to this range). But once you do, it will automatically scale to fit whatever you apply it to.