Svg Gaps When Using Rotate Transform

I'm getting this weird problem which I haven't been able to solve. I'm trying to write a rectangle react component where a Box-Gradient is an option. But my four triangles have a

Solution 1:

By default, browsers draw svg shapes/paths using anti-aliasing (i.e. partially covered pixels along edge are drawn as semi-transparent pixels). When two shapes/paths share an edge, pixels along the shared edge could be painted semi-transparent for both shapes/paths with the end result be a semi-transparent pixel. This is what you are encountering. The issue is most noticable when there is high contrast between the shape/path and the background (e.g. black shape/path on white background).

You can add an attribute or style of shape-rendering="crispEdges" to the shape/path/svg to indicate that the browser should attempt to emphasize contrast between clean edges over rendering speed and geometric precision. For example...

<polygon points="0,0 0,100 50,50" fill="url(#lickMy)"  stroke-width:"0" shape-rendering="crispEdges"/>

Note that this should solve your problem in some browswers (e.g. Chrome, FireFox) but not all browsers (e.g. IE). When shape-rendering="crispEdges", some browsers turn off anti-aliasing for all lines and curves while other browsers turn off anti-aliasing for just straight lines that are close to vertical or horizontal.