How to fill space between 3 points in circle?

user_14304806 0
Viewed 71

I have to points on the border of a circle and on point in the middle of the circle. I want to color the space (pie) between these three points red (including the "arc"). It dosen't have to be in svg.

const AzimuthChart = (props) => {
  const x1 = 428.9397
  const y1 = 159.2263 
  const x2 = 371.3345
  const y2 = 159.0330 

  return (
    <div className="App">
      <svg preserveAspectRatio="xMidYMin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
        <g fill="#61DAFB">
          <circle cx="400" cy="200" r="50"/>
          <circle cx="400" cy="200" r="1" fill='red'/>
          <circle cx={x2} cy={y2} r='1' fill='red'/>
          <circle cx={x1} cy={y1} r='1' fill='red'/>
        </g>
      </svg>
      
    </div>
  )
}

export default AzimuthChart

This is what it looks like right now:

enter image description here

This is what I want it to look like:

enter image description here

I have tried adding an arc:

<path d='M 449.89 203.252 A 1 1 0 0 0 350 202.8' fill='red'/>

But this only created half a circle. Does someone have an idea on how to solve thes

reactjs svg javascript
1 Answers

You just plug the points into the elliptical arc command. Noting that as you need the "big" arc rather than the "small" arc that you need to set the large-arc-flag to 1.

const x1 = 428.9397
const y1 = 159.2263 
const x2 = 371.3345
const y2 = 159.0330

let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

path.setAttribute("d", `M ${x2} ${y2} A 50 50 0 1 0 ${x1} ${y1} L 400 200 Z`)
path.setAttribute("fill", "red");

document.getElementsByTagName('svg')[0].appendChild(path);
<svg viewBox="0 0 800 400">
  <circle cx="400" cy="200" r="50" fill="#61DAFB"/>
</svg>

user_10380150
Related