Javascript 圆弧上的d3 svg剪裁遮罩

有人能给我解释一下如何在圆弧上使用剪切遮罩吗

来解释我在做什么。我有一个圆，在这个圆上我加了一个可以移动的弧。现在我想给这个圆从左到右添加一个线性梯度。但是梯度应该只在圆弧上看到，而不是圆本身。我在这里也找到了一个解决方案，但这不是我想要做的，因为我的梯度应该总是相同的，但只有弧应该显示它。例如：

---

这就是如何用d3渐变填充绘制遮罩圆的方法

const svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
const defs=svg.append（“defs”）
常数梯度=定义附加（“线性梯度”）
.attr（“id”、“示例梯度”）
渐变。附加（“停止”）
.attr（“抵销”、“10%”）
.attr（“停止颜色”、“白色”）
渐变。附加（“停止”）
.attr（“偏移量”、“100%”）
.attr（“停止颜色”、“红色”）
常量掩码=定义附加（“掩码”）
.attr（“id”、“donutMask”）
掩码追加（“圆”）
.attr（“cx”，250）
.attr（“cy”，250）
.attr（“r”，150）
.attr（“填充”、“白色”）
掩码追加（“圆”）
.attr（“cx”，250）
.attr（“cy”，250）
.attr（“r”，120）
const circle=svg.append（“圆”）
.attr（“r”，149）
.attr（“cx”，250）
.attr（“cy”，250）
.attr（“笔划”、“黑色”）
.attr（“掩码”、“url（#donutMask）”）
.attr（“填充”、“url（#示例梯度）”）

---

在不想看到圆的地方画一条白色圆弧，您的示例具有径向渐变