Question

我正在研究SVG，并遇到了尝试在弧的不同侧面分享不同颜色的问题。我已创建此示例以帮助解决我遇到的问题：

＆＃13;

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)

＆＃13;

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

＆＃13;

<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>

＆＃13;

当前绿色阴影的矩形我想改为遮蔽两种不同的颜色。我想将弧内区域（当前重叠橙色和绿色的区域）设置为一种颜色，将弧外区域（仅绿色）设置为另一种颜色。我认为这可能需要使用2个rects，并根据圆圈切断rects，但我不知道如何做到这一点。

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

提前感谢您的帮助!!

Answer 1

您可以在绿色矩形上使用 cloneNode ，并在clonedNode上设置clip-path属性。将剪辑路径网址指向与 defs 标记下定义的原始圈具有相同 d 属性的圆圈。

如果你提供小提琴，我或许可以提供帮助。

Answer 2

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

在圆弧内部着色D3

2 个答案: