How can I limit or clip text in SVG?

September 1, 2023 by Tarik

You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite.

Relevant parts, defining the clip path:

<clipPath id="clip1">
  <rect x="200" y="10" width="60" height="100"/>
  ... you can have any shapes you want here ...
</clipPath>

and then apply the clip path like this:

<g clip-path="url(#clip1)">
  ... your text elements here ...
</g>