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形状/路径（即沿边缘部分覆盖的像素被绘制为半透明像素）。当两个形状/路径共享边缘时，沿着共享边缘的像素可以被涂成半透明的两个形状/路径，最终结果是半透明像素。这就是你遇到的。当形状/路径与背景之间存在高对比度时，问题最为明显（例如，白色背景上的黑色形状/路径）。

您可以在shape / path / svg中添加shape-rendering =“crispEdges”的属性或样式，以指示浏览器应该尝试在渲染速度和几何精度上强调干净边缘之间的对比度。例如......

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

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

使用旋转变换时SVG间隙

1 个答案: