在SVG中绘制圆周长的部分

Question

我需要以不同的颜色绘制圆周的SVG部分（请看下图）。不幸的是我不擅长SVG，所以我发现解决方案在我看来非常差：我使用this post中的describeArc()函数并绘制了两条路径 - 一个彩色圆圈并且，在它上面，半径较小的白色圆圈。例如：

PATH1 = describeArc(x=10000, y=5000, radius=3000, startAngle=45, endAngle=90)
PATH2 = describeArc(x=10000, y=5000, radius=2800, startAngle=45, endAngle=90)

将其插入svg后，我有：

 <path d=PATH1 fill="red" stroke-width="0" />
 <path d=PATH2 fill="white" stroke="white" stroke-width="100" />

它有效，但对我来说这是一个丑陋的解决方案。我怎样才能做得更好？

Answer 1

该函数名为describeArc()，但实际上是绘制一个圆形扇区，而不是弧形。

我同意这有点难看，因为你不必要地画画 - 并且透支 - 大部分领域。而且你会遇到白色边缘周围出现的一些颜色问题。我认为这就是为什么你要包括白色中风。

解决方案非常简单。更改describeArc()功能，使其仅绘制弧，而不是扇区的其余部分。更改代码如下：

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");

IE中。删除构成扇区另外两侧的两个“L”路径命令。换句话说，使用@opsb的答案，而不是@Ahtenus答案。