javascript - 如何填充圆圈中3点之间的空间？

Question

我必须在圆的边界和圆的中间点上点。我想将这三个点之间的空间（饼图）涂成红色（包括“弧线”）。它不必在 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>
  )
} 

导出默认方位图

这就是它现在的样子：

这就是我想要的样子：

我试过添加一个弧：

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

但这只是创造了半个圆圈。有人对如何解决这些问题有想法吗

标签： javascriptreactjssvg

Answer 1

您只需将这些点插入椭圆弧命令。请注意，由于您需要“大”弧而不是“小”弧，因此您需要将大弧标志设置为 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>