앤티 앨리어싱을 유지하면서 선명한 가장자리로 svg 요소를 렌더링하는 방법은 무엇입니까?
앤티 앨리어싱을 유지하면서 선명한 가장자리로 svg 요소를 렌더링하는 방법이 있습니까?
저는 최신 브라우저에서 작동하는 브라우저 기반 도구를 만들고 있습니다.
놀아 모양 렌더링 속성은 나에게 내가 찾고 결과를 제공하지 않습니다.
내 요소가 멋진 앤티 앨리어싱을 사용하여 경로가 아래와 같이 매끄럽게 보이기 를 원합니다 shape-rendering: auto
.
그러나 다음 과 같이 렌더링 할 때와 같이 시작 상자가 선명하고 선명하게 보이도록 앤티 앨리어싱이 필요하지 않은 요소도 원합니다 shape-rendering: crispEdges
.
이것이 가능한가? 제 케이크도 먹고 싶어요?
루트 svg 요소에 대한 모양 렌더링 속성을 설정했을 수 있습니다.
이와 같이 각 모양 요소에 대한 모양 렌더링 속성을 설정해야합니다.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black"/>
<path d="M80,30l100,100" shape-rendering="optimizeQuality"
stroke="black" stroke-width="5"/>
</svg>
앤티 앨리어싱으로 인한 흐릿함없이 선명하게 나타나도록하고 crispEdges 모드를 사용하지 않으려면 선 가장자리가 픽셀 경계에 있는지 확인합니다. 예를 들어 선의 너비가 홀수 인 경우 0.5 픽셀의 좌표를 지정합니다.
<rect x="10.5" y="10.5" width="150" height="20"
stroke-width="1px" fill="none" stroke="black"/>
그리고 획 너비가 짝수이면 경계에.
<rect x="10" y="10" width="150" height="20"
stroke-width="2px" fill="none" stroke="black"/>
물론 이것은 SVG가 1 : 1로 렌더링되는 경우에만 실제로 작동합니다. 즉, 브라우저에 의해 크기가 조정되지 않습니다. 그리고 수평 및 수직 라인에만 해당됩니다.
[사진을 게시하고 싶어서 댓글보다는 답변으로 게시하고 있습니다. 그렇지 않으면 @ defghi1977 의 유용한 게시물에 대한 의견입니다 . 그나저나 그에게 +1.]
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges"
fill="none" stroke="black" />
<rect x="10" y="50" width="150" height="20" shape-rendering="auto"
fill="none" stroke="black" />
<path d="M40,30l100,100" shape-rendering="crispEdges"
stroke="black" stroke-width="5" />
<path d="M80,30l100,100" shape-rendering="auto"
stroke="black" stroke-width="5" />
</svg>
생산
이것은 Firefox 38.0.5에 의해 렌더링되었습니다.
Internet Explorer 11에서 두 shape-rendering
설정 모두 앤티 앨리어싱으로 동일한 결과를 생성하며 선명하지 않습니다.
'Programing' 카테고리의 다른 글
스택에 너무 많은 공간이 할당 된 이유는 무엇입니까? (0) | 2020.11.28 |
---|---|
Ember.Application 등록 및 주입 방법을 언제 어떻게 사용합니까? (0) | 2020.11.28 |
React Redux에서 스토어 상태에 어떻게 액세스합니까? (0) | 2020.11.28 |
HTML 인코딩은 모든 종류의 XSS 공격을 방지합니까? (0) | 2020.11.28 |
ASP.NET MVC 베타에서 IP 주소로 특정 컨트롤러에 대한 액세스 제한 (0) | 2020.11.28 |