我有一个 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);
黑色路径外的这条丑陋的白线很糟糕。如何摆脱这个？有没有抗氧化作用？
另一种选择是在黑色路径上执行 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>