SVG - tepi hodoh dengan pelbagai isian kecerunan

Question

Saya mahu mencipta pemilih warna JavaScript. Saya menggunakan SVG untuk mencipta segi tiga warna seperti ini:

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>

Walau bagaimanapun, seperti yang anda lihat, tepi segi tiga tidak dipaparkan dengan betul, ini berlaku dalam semua penyemak imbas.

Adakah terdapat cara untuk mengelakkan perkara ini apabila menggunakan pelbagai isian kecerunan SVG? Terima kasih terlebih dahulu!

Answer 1

Anda melihat tindakan anti-aliasing: piksel di tepi bentuk ialah gabungan warna pada kedua-dua belah sempadan geometri.

Cuba guna shape-rendering: scrapEdges 来关闭抗锯齿，但要注意该属性仅向浏览器提供提示，但没有明确指示要做什么。 规范介绍了 crispEdges Nilai:

body{
  background: black;
}

.saturation-brightness {
  shape-rendering: crispEdges;
}