Recently I made an SVG-gauge but the border looks not crisp and clear. It is little blurry. how to correct this? I tried a lot but I can't achieve it.
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;
}
The problem is that the green arc is overlapping the red one.
This causes some red color in the antialiased border of the green arc, which makes it look bad:
For a quick test, make the red arc smaller, so the borders do not overlap:
The solution is to make sure the arcs do not overlap.
Zoomed out: