Programing

앤티 앨리어싱을 유지하면서 선명한 가장자리로 svg 요소를 렌더링하는 방법은 무엇입니까?

lottogame 2020. 11. 28. 08:36
반응형

앤티 앨리어싱을 유지하면서 선명한 가장자리로 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설정 모두 앤티 앨리어싱으로 동일한 결과를 생성하며 선명하지 않습니다.

참고 URL : https://stackoverflow.com/questions/22161624/how-to-render-svg-elements-with-crisp-edges-while-still-keeping-anti-aliasing

반응형