SVG | Erase part of another path

I'm working on an SVG image and I can't figure out how to erase a certain part of a path.

This is the current situation: https://gyazo.com/db59fcaf9f122e7e2c0bba5833db9ec5

There are two green letters which overlap and a red bar which does basically represent the area I want to erase so the letters don't stick directly on each other. It works fine when I have a set background colour since I can then easily overwrite lower paths, but with transparent background, this method no longer works, since it appears to make the path transparent, not the entire pixel itself.

TL;DR: How do I make a path actually render the pixel transparent, not just the path element?

Solution

You can mask the J with a white rect and a black N with an extra stroke. Next you use again the N. Please play with the stroke width of the mask <use>

svg{border:1px solid; width:90vh}

text{font-family:arial;dominant-baseline:middle}

<svg viewBox="0 0 24 24">
  <defs>
    <text id="n" x="7" y="14"  >N</text>
  
   <mask id="mascara">
    <rect width="24" height="24" fill="white"  />
    <use xlink:href="#n" fill="black" stroke="black" />
    </mask>
   </defs>
  <text x="5" y="10" style="mask: url(#mascara)">J</text>
  <use xlink:href="#n" fill="black"  />
</svg>