두 개의 동일한 SVG 직사각형을 오버레이 할 때 작은 테두리

SVG에서 두 개의 동일한 사각형을 시각화하는 데 문제가 있습니다. (가) 동일한 크기와 같은 위치 모두가, 하단 하나는 검은 색이며, 상단 하나는 흰색이다 :두 개의 동일한 SVG 직사각형을 오버레이 할 때 작은 테두리

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!ENTITY ns_svg "http://www.w3.org/2000/svg"> 
    <!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> 
]> 
<svg version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="34.017" 
     height="70.877" viewBox="0 0 34.017 70.877"> 
<g id="top_x5F_middle"> 
    <rect x="11" y="10" fill="black" width="11" height="31"/> 
    <rect x="11" y="10" fill="white" width="11" height="31"/> 
</g> 
</svg>

뷰어 (파이어 폭스 브라우저 또는 잉크 스케이프 편집기)에서 그들을 보는 작은 국경이있다. 테두리는 다른 줌 레벨에 따라 다르므로 부동 소수점 정밀도에 문제가있는 것처럼 보입니다.

Border when viewing in Inkscape Border when viewing in firefox

이 경계의 이유는 무엇입니까? 그것을 제거하는 방법?

추신 : 저는 해킹에 관심이 없습니다. 아래의 사각형을 더 작게 만드는 등의 일입니다.이 예제는 실제 사용 사례가 훨씬 복잡하고 크기 조정으로 해결하지 못합니다.

출처

2012-04-25 Charly

이것은 앤티 엘리 어싱에 대한 것입니다. 첫 번째 사각형을 그릴 때 배경이 약간 섞인 블렌드입니다. 두 번째와 동일하므로 회색 윤곽선을 얻습니다. 덕분에 많은 - 이러한 문제가 발생하지 않도록하려면

는, 하나 개의 방법이

출처

2012-04-25 11:06:37

아 모양 렌더링 = "crispEdges"을 사용하여 antialiasing을 비활성화하는 것입니다, 아주 좋은 ... – mihai

위대한을 작동하는 것 같다. 가장 좋은 점은 상속된다는 것입니다. 따라서 최상위 수준의 문서에서 정의해야합니다. 최악의 렌더링 품질은 나에게 좋다 ... – Charly

두 개의 동일한 SVG 직사각형을 오버레이 할 때 작은 테두리

답변

관련 문제