锋利的边缘 SVG

Question

最近做了一个SVG-gauge，但是边框看起来不够清晰。它有点模糊。如何纠正这个？我尝试了很多，但我无法实现。

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;
}

Answer 1

问题是绿色圆弧与红色圆弧重叠。

这会导致绿色弧线的抗锯齿边框出现一些红色，使其看起来很糟糕：

为了快速测试，将红色圆弧变小，这样边界就不会重叠：

解决方法是确保圆弧不重叠。

缩小：

锋利的边缘 SVG

Sharp edges SVG

html

css

svg

gauge