锋利的边缘 SVG答案

【问题标题】：Sharp edges SVG锋利的边缘 SVG
【发布时间】：2017-04-04 09:27:31
【问题描述】：

最近我做了一个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;
}

【问题讨论】：

我怀疑这是由于曲线试图在屏幕像素之间放置颜色（例如当您尝试绘制对角线时），最终您的图形会尝试消除锯齿（平滑）边缘使它们看起来不那么“锯齿状”。看看这个解决方案：stackoverflow.com/a/22165796/648350
我看到了@haxxxton。我想不通。无论我尝试什么看起来都一样，你能更新我的 plunker
shape-rendering="crispEdges" 将为您提供锐利的边缘。
我试过了，但结果更糟
您在什么浏览器/平台上进行测试？可以分享一下截图吗？它在 iOS Safari 上看起来非常清晰......

标签： html css svg gauge

【解决方案1】：

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

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

为了快速测试，让红色弧线变小，这样边框就不会重叠：

解决办法是确保弧线不重叠。

缩小：

【讨论】：