I am working on an SVG, and came across the issue of trying to share different colors on separate sides of an arc. I have created this example to help go through this problem I'm having:
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>The rectangle that is currently shaded green I would like to instead shade two different colors. I would like the area inside of the arc (the area currently overlapping orange and green) to be set to one color, and the area outside of the arc (only green) to be set to another color. I think this probably requires using 2 rects, and cutting off the rects based on the circle, but I'm not sure how to do this.
Note: The way the arc was drawn was by drawing a circle, and then clipping a rectangle over the parts of the circle I don't want shown. Given that I'm trying to fill color differently based on what side of the circle's line the fill color is on, I'm not sure if this is the best way to draw the arc.
Thanks in advance for help with this!!
