圆圈内的 SVG 路径重叠不良

Question

我有一个 SVG 定时器。有一条路径可以显示当前状态。但是正如您在我附上的屏幕截图中所见，路径严重重叠：

此屏幕截图的检查器代码是：

<svg class="ion-timer-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" style="width: 100%; height: 100%;">
<circle fill="none" cx="60" cy="60" r="55" style="stroke: rgb(255, 255, 255); stroke-width: 10;"></circle>
<path fill="none" transform="scale(-1, 1) translate(-120 0)" d="M 114.89147163068816 63.4534536651529 A 55 55 0 0 0 60 5" style="stroke: rgb(0, 0, 0); stroke-width: 10; stroke-linecap: butt;"></path>
<g ng-transclude=""></g>
</svg>

SVG 是这样生成的：

// credit to 
    // inspired by: https://github.com/crisbeto/angular-svg-round-progressbar
    var updateState = function(ring, val, total, options) {
      var polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
        var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
        return {
          x: centerX + (radius * Math.cos(angleInRadians)),
          y: centerY + (radius * Math.sin(angleInRadians))
        };
      };

      var R           = options.progressCircle.radius - (options.progressCircle.strokeWidth / 2);
      var size        = options.progressCircle.radius * 2;
      var value       = val >= total ? total - 0.00001 : val;
      var type        = 359.9999;
      var perc        = total === 0 ? 0 : (value / total) * type;
      var x           = size/2;
      var start       = polarToCartesian(x, x, R, perc); // in this case x and y are the same
      var end         = polarToCartesian(x, x, R, 0);
      var arcSweep    = (perc <= 180 ? '0' : '1');
      var d           = ['M', start.x, start.y, 'A', R, R, 0, arcSweep, 0, end.x, end.y].join(' ');

      return ring.attr('d', d);

黑色路径外的这条丑陋的白线糟透了。如何摆脱这个？有抗药性吗？

另一种选择是在黑色路径上做 margin-top:-1px。但是在哪里做呢？

编辑：这是 ccprog 建议后的计时器：

<svg class="ion-timer-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" style="width: 100%; height: 100%;">
    <mask id="mask">
        <circle id="ring" fill="none" cx="60" cy="60" r="55" style="stroke: rgb(255, 255, 255); stroke-width: 10;"></circle>
    </mask>
    <g mask="url(#mask)">
        <circle fill="rgb(255, 255, 255)" cx="60" cy="60" r="61"></circle>
        <path fill="none" style="stroke-width: 12; stroke: rgb(0, 0, 0); stroke-linecap: butt;" transform="scale(-1, 1) translate(-120 0)" d="M 112.6047821265274 76.0541862895814 A 55 55 0 0 0 60 5"></path>
    </g>
    <g ng-transclude=""></g>
</svg>

Answer 1

使用全圆作为蒙版：

<svg class="ion-timer-svg"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 120 120" style="width: 100%; height: 100%;">
  <mask id="mask">
    <circle id="ring" fill="none" cx="60" cy="60" r="55"
            style="stroke: rgb(255, 255, 255); stroke-width: 10;"></circle>
  </mask>
  <g mask="url(#mask)">
    <circle fill="rgb(255, 255, 255)" cx="60" cy="60" r="61" />
    <path fill="none" transform="scale(-1, 1) translate(-120 0)"
          d="M 114.89147163068816 63.4534536651529 A 55 55 0 0 0 60 5"
          style="stroke: rgb(0, 0, 0); stroke-width: 12; stroke-linecap: butt;"></path>
  </g>
 <g ng-transclude=""></g>
</svg>

请注意，这是可行的，因为圆形描边的颜色是白色。任何其他颜色都会给你一些透明度。

圆圈内的 SVG 路径重叠不良

SVG path inside circle bad overlap

svg

svg-path