날카로운 가장자리 SVG

최근 SVG 게이지를 만들었지 만 테두리가 선명하고 선명하지 않은 것처럼 보입니다. 조금 흐릿하다. 이 문제를 해결하는 방법? 나는 많이 시도했지만 그것을 얻을 수 없다.날카로운 가장자리 SVG

https://plnkr.co/edit/TIgs0DZdWmROxWacIJlj?p=preview

Html 
<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <a id="gauge0" class="gauge-container two pointer text-black active" " ng-click="identifierMenu(key) "> 
    <svg viewBox="0 0 1000 1000 " class="gauge "><path class="dial " fill="transparent" stroke="#eee " stroke-width="20 " d="M 100 500 A 400 400 0 0 1 900 500 "></path><text class="value-text " x="500 " y="550 " font-size="700% " font-family="sans-serif 
    " font-weight="bold " text-anchor="middle "></text><path class="value " fill="transparent " stroke="#666 " stroke-width="25 " d="M 100 500 A 400 400 0 0 1 616.114 117.224 "></path></svg></a> 
</body> 

</html>

CSS

/* Styles go here */ 

body { 
    width: 100%; 
    height: 100%; 
} 

.gauge-container { 
    width: 12.5%; 
    height: 152px; 
    display: block; 
    float: left; 
    padding: 0 20px 20px 20px; 
    overflow: hidden; 
} 

.gauge-container.two {} 

.gauge-container.two > .gauge > .dial { 
    stroke: #FF634D; 
    stroke-width: 75; 
} 

.gauge-container.two > .gauge > .value { 
    stroke: #00a99d; 
    stroke-dasharray: none; 
    stroke-width: 75; 
}

출처

2017-01-07 Sibi Raj

난이, 당신이 당신의 그래픽하려고 끝낼 (당신이 대각선을 그릴 때처럼) 화면의 픽셀 사이의 색상을 배치하려고 곡선에 의한 의심 것 가장자리를 앤티 앨리어스 (부드럽게)하여 덜 들쭉날쭉하게 보이게 만듭니다. 이 솔루션을 살펴보십시오. http://stackoverflow.com/a/22165796/648350 – haxxxton

@haxxxton을 보았습니다. 나는 알아낼 수 없다. 무엇을하려고해도 똑같은 모습으로 내 플 런커를 업데이트 해주세요 –

shape-rendering = "crispEdges"는 날카로운 모서리를 줄 것입니다. –

문제는 녹색 아크 빨간 하나를 중복된다는 점이다.

이것은 나쁜 보이게 녹색 아크의 안티 앨리어싱 경계에서 약간의 붉은 색 발생합니다, 빠른 테스트에 대한

붉은 아크 작게 만들을, 그래서 테두리 중복을하지 않습니다 :

이 솔루션은 아크가 중복되지 않도록하는 것입니다.

밖으로 확대 :

이

출처

2017-04-04 01:27:31

감사합니다, 그것은 작동합니다 .... –

답변

관련 문제