IE10 SVG 구현이 안티 앨리어싱 <rect> 요소를 거부합니까?

저는 d3과 SVG를 사용하여 일련의 직사각형을 표시하는 차트 라이브러리에서 작업 해 왔습니다. 데이터 세트는 주어진 영역에 표시 할 사각형의 수를 제어하며, 대부분의 경우 수학은 깔끔하게 작동하지 않으므로 사각형이 정수로 시작하고 끝나지 않습니다. Firefox, Chrome 및 Safari는 모두 직사각형에 대한 안티 앨리어싱을 통해 이러한 우발성을 해결합니다. IE는 가장 가까운 픽셀 값으로 반올림되는 것처럼 보이며 모든 rect 요소에 대한 안티 알리아싱을 거부합니다. 모양 변환 등을 변경해 보았습니다. 아무 소용이 없습니다.IE10 SVG 구현이 안티 앨리어싱 <rect> 요소를 거부합니까?

IE10 :

enter image description here

크롬 :

enter image description here

는 나란히 IE10에서 동일한 데이터의 비교 및 가장 최근의 크롬 해제입니다

SVG 마크 업 구조 변경과 관련이없는 문제를 알고있는 사람이 있습니까? CSS 속성 또는 태그 속성을 설정하는 것은 요소 자체를 변경하는 것보다 바람직합니다. 이 결정에 대한 근거를 설명하는 Microsoft 문서를 본 사람이 있습니까? 나는 지금까지 어떤 것도 위로 올릴 수 없었다.

출처

2013-09-16 orochi235

이미지가 완전히 똑같습니다. –

그들은 동일한 데이터를 표시하지만 하나는 Chrome에서 렌더링되고 다른 하나는 IE10에서 렌더링됩니다. Chrome 렌더링의 모든 막대는 균등하게 두껍고 균등하게 보이며 가장자리가 앤티 앨리어스를 유지해야합니다. IE 렌더링에서 부분 투명도가없는 날카로운 모서리가 있어야하며 열의 길이가 고르지 않으며 오른쪽의 네 번째 열은 다른 두께의 절반에 불과합니다. 그들이 똑같이 생겼다는 것을 안다면, 이상한 일이 벌어지고있는 것입니다 ... – orochi235

아, 이제 알겠습니다. 앤티 앨리어싱 동작이 지정되지 않았으므로이 결정은 플랫폼/브라우저에 따라 매우 다르며 기본 네이티브 그래픽 라이브러리 수준에서 발생합니다 (GPU 대 CPU 렌더링에 따라 결과가 다를 수도 있음). 일반적으로 crispEdges를 사용하면 모든 플랫폼에서 앤티 앨리어스가 적용되지 않은 결과를 얻을 수 있습니다. 필터를 추가하여 "수동으로 앤티 앨리어싱"할 수 있지만 결과가 보장되지는 않습니다. –

IE는 모양 렌더링 부동산에 관한 걱정하지 않는 것,하지만 난 작은 회전 변환을 지정하여 당신이 앤티 앨리어싱 모양에 강제 할 수 있음을 발견했습니다

svg { 
    transform: rotate(.00001deg); /* hack to force anti-aliasing in IE */ 
}

는 IE11에서 테스트를 .

출처

2015-06-26 13:21:57 guest

IE10 SVG 구현이 안티 앨리어싱 <rect> 요소를 거부합니까?

답변

관련 문제