JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg-root" width="500" height="500" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!--======================================================================-->
    <!--abgewandelt von diesem Beispiel https://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg-->
  <!--======================================================================-->
   <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <defs>
      <mask id="maskedtext">
        <rect stroke="white" fill="none" y="160" height="40" width="90" stroke-width="15" rx="15" x="200"/>
        <rect height="20" fill="#000" width="50" x="260" y="170"/>
      </mask>
    </defs>
    <image x="140" y="80" width="200" height="200" xlink:href="https://dev.w3.org/SVG/profiles/1.1F2/test/images/DisplaceChecker.png"/>
    <rect mask="url(#maskedtext)" fill="gold" width="400" x="0" y="0" height="400"/>
  </g>
</svg>