How to get rid of hairline from overlapping svg shapes

Question

I am using d3 and SVG to draw a rectangle. I then draw a different rectangle that is smaller and a different color inside the first rectangle. When I change the smaller rectangle to the same color as the bigger one you can see a white outline of where the smaller rectangle was. What is the bet way to fix this so that the smaller one just blends into the bigger one?

Answer 1

As long as your smaller inside rectangle has no stroke colour, then it should not be visible.

 <svg width="400" height="200"> <rect x="20" y="20" width="160" height="160" fill="red"/> <rect x="50" y="50" width="100" height="100" fill="green"/> <rect x="220" y="20" width="160" height="160" fill="red"/> <rect x="250" y="50" width="100" height="100" fill="red"/> </svg>