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 http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
    // 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);

编辑：这是来自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>

注意，这是因为圆圈笔划的颜色是白色的。任何其他颜色都会给你一些透明度。