SVG looking for an inverse drawing style (xor pen)

Is there an 'inverse drawing style' implemented in SVG? I simulate what I mean in the snippet, but that's not a proper way of doing it when things get more complicated. For instance when you want to draw a 'rubber box' (or selection box) or you want to make calibration crosses.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="10" fill="none">
   <rect x="50" y="50" width="100" height="100" stroke="black" /> 
   <line x1="100" y1="25" x2="100" y2="50" stroke="black" /> 
   <line x1="100" y1="45" x2="100" y2="55" stroke="white" /> 
   <line x1="100" y1="55" x2="100" y2="155" stroke="black" /> 
   <line x1="100" y1="155" x2="100" y2="145" stroke="white" /> 
   <line x1="100" y1="175" x2="100" y2="155" stroke="black" /> 
</g>
</svg>

<!-- end snippet -->

In this example it should have been 1 line in invert modus in stead of 5 lines simulating it.

This kind of invert drawing you find in many programming environments. It would surprise me if it wasn't implemented in SVG. But so far, I didn't find it. I tried to simulate more complicated ones using javascript, but even then it is not easy, since there is no way of probing the color at a certain point, as far as I know.

Shape elements like<path> and <polygon>, and text content elements support a fill-rule presentation attribute that computes what is inside and outside of a single path in two different ways. That makes it possible to define your example like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<svg viewBox="0 0 30 40" width="40%">
  <path fill-rule="nonzero" d="M 4,9 H 26 V 31 H 4 Z M 24,29 H 6 V 11 H 24 Z M 14,5 H 16 V 35 H 14 Z" />
</svg>
<svg viewBox="0 0 30 40" width="40%">
  <path fill-rule="evenodd" d="M 4,9 H 26 V 31 H 4 Z M 24,29 H 6 V 11 H 24 Z M 14,5 H 16 V 35 H 14 Z" />
</svg>

<!-- end snippet -->

Results for the nonzero value will differ depending on subpaths being drawn in clockwise or anti-clockwise direction.

Note you cannot apply this attribute to describe the intersection of multiple elements; they always apply to only one element or glyph. Similarily, it describes fills and has no effect on the rendering of strokes.

I want to give some more explanation for what I am looking for, what my question is about, and show you a possible go-around or circumvention.
By the way: invert mode is also known as xor pen.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg  width="400" height="200" viewBox="0 0 100 50" 
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink"
   onload="init()">
   <script>
   var mc = {}, wp = {}; // mycross, whitepart
   var x = 5, intervalID = 0;
   function init() {
      mc = document.getElementById("mycross");
      wp = document.getElementById("whitepart");
      setTimeout(doloop, 1500);   
   }
   function doloop() {
      if (intervalID!=0) return;
      intervalID = setInterval(loop,30);    
   }
   function loop() {
      mc.setAttribute("x",x); x += 0.25;
      if(x>75) { 
         clearInterval(intervalID); intervalID = 0; 
         if(wp.getAttribute("style") == "display:none") {
            x = 5; mc.setAttribute("x",x);
            wp.setAttribute("style","display:inline-block");
            setTimeout(doloop, 1500); 
         } else {wp.setAttribute("style","display:none"); }
      };
   }
   </script>
   <defs>
      <g id="cross" style="fill:none;fill-opacity:1;stroke-width:0.26px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.264583, 0.264583;stroke-dashoffset:0;">>
         <g stroke="black">
            <circle cx="10" cy="10" r="5"/>
            <line x1="0" y1="10" x2= "20" y2="10" />
            <line x1="10" y1="0" x2= "10" y2="20" />
         </g>
         <g id="whitepart" stroke="white" transform="translate(0.1 0.1)" style="display:none">
            <circle cx="10" cy="10" r="5"/>
            <line x1="0" y1="10" x2= "20" y2="10" />
            <line x1="10" y1="0" x2= "10" y2="20" />
         </g>
      </g>
   </defs>
   
   <g fill="none" stroke="black">
      <rect x="0" y="0" width="100" height="50" />
      <circle cx="50" cy="25" r="2" stroke-width="2.5" />
      <circle cx="50" cy="25" r="10" stroke-width="5" />
      <circle cx="50" cy="25" r="20" stroke-width="7.5" />
   </g>
   
   <use id="mycross" x="5" y="15" xlink:href="#cross" />
</svg>

<!-- end snippet -->

In this example above I suppose the purpose of an invert modus is clearer.

The first time the 'cross' passes, it is not 'inverted' (nor simulated). So where the 'cross' passes over a black surface, you cannot see it anymore. If you had a real invert mode or xor pen: on white it would be black, on black it would be white. Where ever the cross is, then you can see it.

The second time the cross passes, I added a 'layer' with the same cross in white, translated or shifted 0.1 points.
This is a circumvention, and like they all do, they ask more work or programming and might get you in trouble in some cases. A simple xor pen would make it easier to handle.

(most recent adaptation makes it work in Safari too - besides FireFox, Chrome, MS Edge)