使用旋转变换时的 SVG 间隙答案

【问题标题】：SVG gaps when using rotate transform使用旋转变换时的 SVG 间隙
【发布时间】：2016-02-03 09:08:12
【问题描述】：

我遇到了一个我无法解决的奇怪问题。我正在尝试编写一个矩形反应组件，其中一个 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>

【问题讨论】：

标签： html svg transform

【解决方案1】：

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

您可以将 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" 时，一些浏览器关闭所有直线和曲线的抗锯齿，而其他浏览器只关闭接近垂直或水平的直线的抗锯齿。

【讨论】：

谢谢！这有帮助，但是当我将渐变放回原处时，我仍然会在广场上看到 X 的外观，这是一种视错觉吗？
这是之前和之后的屏幕截图：postimg.org/image/qbo7ofoa5再次感谢！