SVG - 다중 그라데이션 채우기가 있는 보기 흉한 가장자리

Question

JavaScript 색상 선택기를 만들고 싶습니다. 저는 SVG를 사용하여 다음과 같은 색 삼각형을 만듭니다.

으아아아 으아아아

그러나 보시다시피 삼각형의 가장자리가 올바르게 렌더링되지 않습니다. 이는 모든 브라우저에서 발생합니다.

여러 개의 SVG 그래디언트 채우기를 사용할 때 이를 방지할 수 있는 방법이 있나요? 미리 감사드립니다!

Answer 1

안티앨리어싱이 작동하는 것을 볼 수 있습니다. 모양 가장자리의 픽셀은 기하학 테두리 양쪽의 색상이 혼합되어 있습니다.

shape-rendering: scrapEdges 来关闭抗锯齿，但要注意该属性仅向浏览器提供提示，但没有明确指示要做什么。 规范介绍了 crispEdges 값을 사용해 보세요:

으아아아 으아아아