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>