SVG - bords laids avec plusieurs remplissages dégradés

Question

Je souhaite créer un sélecteur de couleurs JavaScript. J'utilise SVG pour créer un triangle de couleurs comme celui-ci :

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>

Cependant, comme vous pouvez le constater, les bords du triangle ne sont pas rendus correctement, cela se produit dans tous les navigateurs.

Existe-t-il un moyen d'éviter cela lors de l'utilisation de plusieurs remplissages dégradés SVG ? Merci d'avance!

Answer 1

Vous voyez l'anticrénelage en action : les pixels situés au bord de la forme sont un mélange de couleurs de chaque côté de la bordure de la géométrie.

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

body{
  background: black;
}

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