圆弧上的d3 svg剪贴蒙版

Question

有人可以向我解释如何在圆弧上使用剪切蒙版。

解释我在做什么。我有一个圆，并在此圆上添加了可以移动的弧线。现在，我想从左到右向此圆添加线性渐变。但是渐变只能在圆弧上看到，而不是圆本身。另外，我在https://www.freshconsulting.com/d3-js-gradients-the-easy-way/处找到了一个解决方案，但这不是我想要做的，因为我的渐变应该始终是相同的，但是只有圆弧应该显示它。例如这样：

Answer 1

这是绘制带有d3渐变填充的蒙版圆的方法。

const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500)

const defs = svg.append("defs")

const gradient = defs.append("linearGradient")
  .attr("id", "exampleGradient")

gradient.append("stop")
  .attr("offset", "10%")
  .attr("stop-color", "white")

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", "red")

const mask = defs.append("mask")
  .attr("id", "donutMask")

mask.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 150)
  .attr("fill", "white")

mask.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 120)

const circle = svg.append("circle")
  .attr("r", 149)
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("stroke", "black")
  .attr("mask", "url(#donutMask)")
  .attr("fill", "url(#exampleGradient)")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>