обтравочная маска 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>