我想建立一個 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 漸層填滿時有辦法避免這種情況嗎？先致謝！
您正在看到抗鋸齒的作用：形狀邊緣的像素是幾何邊框兩側顏色的混合。
嘗試使用
shape-rendering: scrapEdges來關閉抗鋸齒，但請注意該屬性僅向瀏覽器提供提示，但沒有明確指示要做什麼。 規格介紹了crispEdges值：body{ background: black; } .saturation-brightness { shape-rendering: crispEdges; }