JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -400 600 600">
    
  <!-- Here I define the mask, a white rectangle with a strip removed -->
  <defs>
    <mask id="mymask">
      <rect x="100" y="-200" width="200" height="100" fill="white"/>
      <path d="M 250 -150  L 150 -150" stroke="black" fill="none" stroke-opacity="1" fill-opacity="1" stroke-width="25"/>
    </mask>
  </defs>

  <!-- This masked blue rectangle is displayed correctly, and lets us see where the mask is -->
  <rect x="-100" y="-300" width="500" height="500" fill="blue" fill-opacity="0.2" mask="url(#mymask)"/>

  <!-- This green vertical line is not masked, and is drawn on top of the blue rectangle -->
  <path d="M 220 -110 L 220 -190" stroke="green" stroke-opacity="0.5" stroke-width="10" fill="none"/>

  <!-- INCORRECT - This masked red line should be drawn to the left of the green line, but it does not appear -->
  <path d="M 180 -110 L 180 -190" stroke="red" stroke-width="10" mask="url(#mymask)"/>

</svg>