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 gap between them, I've tried hacking about with it (including using a gaussian blur) to close the gap but I can't seem to close the gap without causing the corners to mess up.

<html style="margin:0;padding:0;height:100%;width:100%;">
    <head>
    </head>
    <body style="margin:0;padding:0;height:100%;width:100%;">
        <svg height=0 width=0>
            <defs>
                <linearGradient id="lickMy" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(125,125,125);stop-opacity:1" />
                    <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
                </linearGradient>
                <filter id="balls">
                    <feGaussianBlur stdDeviation="1" />
                </filter>
            </defs>
        </svg>  

        <svg height=100% width=100% >
            <rect width="100%" height="100%" fill="rgb(125,125,125)"></rect>
            <circle cx="100" cy="100" r="40" fill="white" />
            <g transform="translate(50,50)" >
                <g>
                    <polygon points="0,0 0,100 50,50" fill="url(#lickMy)"  stroke-width:"0" />
                </g>
                <g transform="rotate(90,50,50)">
                    <polygon points="0,0 0,100 50,50" fill="url(#lickMy)" stroke-width:"0" />
                </g>
                <g transform="rotate(180,50,50)">
                    <polygon points="0,0 0,100 50,50" fill="url(#lickMy)"   stroke-width:"0" />
                </g>
                <g transform="rotate(-90,50,50)">
                    <polygon points="0,0 0,100 50,50" fill="url(#lickMy)"   stroke-width:"0" />
                </g>
            </g>
        </svg>
    </body> 
</html>

回答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.

来源：https://stackoverflow.com/questions/35172622/svg-gaps-when-using-rotate-transform

标签

html5

svg

transform