使用旋转变换时的 SVG 间隙

Question

我遇到了一个我无法解决的奇怪问题。我正在尝试编写一个矩形反应组件，其中可以选择 Box-Gradient。

但是我的四个三角形之间有一个间隙，我试过用它（包括使用高斯模糊）来缩小间隙但我似乎无法在不弄乱角落的情况下缩小间隙向上。

<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>

Answer 1

默认情况下，浏览器使用抗锯齿绘制 svg shapes/paths（即沿边缘部分覆盖的像素被绘制为半透明像素）。当两个 shapes/paths 共享一条边时，沿共享边的像素可以为两个 shapes/paths 绘制半透明，最终结果是半透明像素。这就是你所遇到的。当 shape/path 和背景之间存在高对比度时（例如白色背景上的黑色 shape/path），问题最为明显。

您可以将 shape-rendering="crispEdges" 的属性或样式添加到 shape/path/svg 以指示浏览器应尝试强调清晰边缘与渲染速度和几何精度之间的对比.例如...

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

请注意，这应该可以解决您在某些浏览器（例如 Chrome、FireFox）但不是所有浏览器（例如 IE）中的问题。当 shape-rendering="crispEdges" 时，一些浏览器关闭所有直线和曲线的抗锯齿，而其他浏览器仅关闭接近垂直或水平的直线的抗锯齿。

使用旋转变换时的 SVG 间隙

SVG gaps when using rotate transform

html

svg

transform