Stroke-linecap正在拉扯我在拉斐尔的路径......有没有办法让它绕着＆＃34;内部＆＃34;路径？

Question

我正在尝试绘制一个带有两条路径的简单圆环形图：一条显示数量，另一条显示灰色的缺失区域。

以下是jsfiddle正是这样做的：http://jsfiddle.net/e2J89/

问题：如果我添加"stroke-linecap":"round"，则行括号会拉伸路径，从而搞砸了我的所有计算。

var solved = paper.path().attr({
    "stroke": "#f00",
    "stroke-width": 14,
    "stroke-linecap":"round",
    arc: [center_x, center_y, 0, total_amount, radius]
});

有没有一种简单的方法来解决这个问题，还是我必须以不同的方式重新计算起点/数量？ （它也会取决于笔画宽度吗？）

var solved_amount = amount;
var unsolved_amount = total_amount - solved_amount;

var solved_start = (180 * unsolved_amount/100 + start_delta) % 360;
var unsolved_start = (360 / total_amount * solved_amount + solved_start) % 360;

Answer 1

stroke-linecap: round在路径末端绘制一个弧心，半径等于笔划宽度的一半。

See SVG spec for diagram

如果您想要圆线帽，则必须调整弧长。另外，你会如何处理小百分比？即使零长度线也会绘制圆形线帽。