圆弧内的阴影 D3答案

【问题标题】：Shading inside an arc D3圆弧内的阴影 D3
【发布时间】：2018-04-25 01:51:45
【问题描述】：

我正在研究 SVG，并遇到了尝试在弧的不同侧共享不同颜色的问题。我创建了这个示例来帮助解决我遇到的这个问题：

const svg = d3.select('#chart') 
  .attr("viewBox", "0, 0, " + 50 + ", " + 47 + "")

// clip to cut off circle
svg.append("defs").append("clipPath")
  .attr("id", "cut-off")
  .append("rect")
  .attr("width", 44)
  .attr("height", 23.75)
  .attr("x", 25)
  .attr("y", 42.25)
  .attr("transform", "translate(" + -22 + "," + -28.5 + ")");

svg.append("circle")
  .attr("cx", 25)
  .attr("cy", 4.75)
  .attr("r", 23.75)
  .attr("fill", "orange")
  .attr("opacity", 0.25)
  .attr("stroke", 'black')
  .attr("stroke-width", 0.25)
  .attr("clip-path", "url(#cut-off)");   
  
svg.append("rect")
  .attr("x", 3)
  .attr("y", 0)
  .attr("width", 44)
  .attr("height", 14)
  .attr("fill", 'blue')
  .attr("opacity", 0.2)

// here's the one
svg.append("rect")
  .attr("x", 0)
  .attr("y", 14)
  .attr("width", 17)
  .attr("height", 20)
  .attr("fill", 'green')
  .attr("opacity", 0.2)

#chart {
  width: 500px;
  height: 470px;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg"
     id="chart"></svg>

当前为绿色阴影的矩形我想用两种不同的颜色代替。我希望将弧内的区域（当前重叠橙色和绿色的区域）设置为一种颜色，并将弧外的区域（仅绿色）设置为另一种颜色。我认为这可能需要使用 2 个矩形，并根据圆圈切断矩形，但我不知道该怎么做。

注意：绘制圆弧的方式是画一个圆，然后在我不想显示的圆部分上剪下一个矩形。鉴于我试图根据填充颜色在圆线的哪一侧来填充颜色，我不确定这是否是绘制弧线的最佳方法。

在此先感谢您的帮助！

【问题讨论】：

能否提供您想要实现的样图？
我的代码 sn-p?

标签： d3.js svg

【解决方案1】：

您可以在绿色矩形上使用 cloneNode 并在 clonedNode 上设置clip-path 属性。将 clip-path url 指向一个与 defs 标记下定义的原始圆具有相同 d 属性的圆。

如果你提供一个小提琴，我也许可以帮忙。

【讨论】：

【解决方案2】：

我在这里使用了这个链接 - How to calculate the SVG Path for an arc (of a circle) - 来解决这个问题。任何尝试使用 svg arc 将圆（或圆的一部分）绘制为路径的人都应该查看此链接。

【讨论】：