Question

最近我做了一个SVG测量仪，但边框看起来不清晰。它有点模糊。怎么纠正这个？我尝试了很多，但我无法实现它。

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

function stream()
{
    //added a time limit for safe-guarding
    set_time_limit(3);
    echo fread($this->stream, $this->offset);
    flush();
}

CSS

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>

Answer 1

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

这会在绿色弧线的抗锯齿边框中产生一些红色，这会让它看起来很糟糕：

要进行快速测试，请使红色弧变小，以使边框不重叠：

解决方案是确保弧不重叠。

缩小：

锋利的边缘SVG

1 个答案: