我想创建一个JavaScript颜色选择器。我使用SVG创建一个颜色三角形，如下所示：
body{
background: black;
}<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" class="saturation-brightness"><defs>
<radialGradient id="darks" cx="7.63px" cy="65px" r="72.7446px" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#000000" />
<stop offset="100%" stop-color="rgba(0, 0, 0, 0)" />
</radialGradient>
<radialGradient id="lights" cx="80.37" cy="65px" r="72.7446px" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
</radialGradient>
<radialGradient id="mids" cx="44px" cy="65px" r="36.37px" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#808080" />
<stop offset="100%" stop-color="rgba(128, 128, 128, 0)" />
</radialGradient>
</defs>
<polygon points="44,2 7.63,65 80.37,65" fill="red" />
<polygon points="44,2 7.63,65 80.37,65" fill="url(#mids)" />
<polygon points="44,2 7.63,65 80.37,65" fill="url(#darks)" />
<polygon points="44,2 7.63,65 80.37,65" fill="url(#lights)" />
</svg>但是，正如您所看到的，三角形的边没有正确呈现，这在所有浏览器中都发生过。
当使用多个SVG渐变填充时，有什么方法可以避免这种情况吗？
1条答案
按热度按时间rjee0c151#
您将看到消除锯齿的效果：在你的形状的边缘的像素是在几何边界的两边的颜色的混合。
尝试使用
shape-rendering: crispEdges来关闭抗锯齿功能，但要注意，该属性仅向浏览器提供提示，而没有明确的操作说明。指示用户代理应尝试强调图稿清晰边缘之间的对比度，而不是呈现速度和几何精度。若要获得清晰的边缘，用户代理可能会关闭所有直线和曲线的抗锯齿功能，或者可能只关闭接近垂直或水平的直线。此外，用户代理可能会调整线条位置和线条宽度，以使边缘与设备像素对齐。