Avoid lines between SVG tiled rectangles that are NOT pixel-aligned

I have several close ones rect

like this question but not pixel aligned. I cannot change the positions of the element. For example :

<svg width="326.01071" height="255.5332" xmlns="http://www.w3.org/2000/svg"
   viewBox="18 18 41 41"
>
    <rect x="21" y="21" width="51" height="3" fill="black" class="crisp" />
    <rect x="21" y="24" width="30" height="3" fill="black" class="crisp" />
    <rect x="21" y="41" width="51" height="3" fill="black" />
    <rect x="21" y="44" width="30" height="3" fill="black" />
</svg>​

      

        
        
        
      

    

I get a fine line between straight lines. shape-rendering="crispEdges"

Does not help.

Adding a bit of overlap helps a little, but causes visible splashes at the vertical joints where two smooth edges meet, as overlapping rectangles are involved in color mixing.

Is there anything I can do?

Well the rectangles are the same color, so I can introduce some smart algorithm to combine adjacent rectangles into one shape. This is a clean but difficult path.