Skip to content

Home

Jump to bottom
maryco edited this page Jan 30, 2024 · 3 revisions

SVG Path Arc

Arc
Sample code 
const makePathArc = (arcAngle: number): string => {
  const radian = (arcAngle * Math.PI) / 180
  const startX = centerX + Math.cos(radian) * pieRadius
  const startY = centerY + Math.sin(radian) * pieRadius

  const endX = centerX
  const endY = centerY - pieRadius

  // NOTE: 円弧の長・短どちらを使用するか
  const applyLargeArc = arcAngle >= 90 && arcAngle <= 270 ? 0 : 1

  // M 始点x 始点y A(A:終点は絶対座標 a:相対座標) x軸半径 y軸半径 0(傾き？) (上記) 1(時計回り) 終点x 終点y
  return `M ${startX} ${startY} A ${pieRadius} ${pieRadius} 0 ${applyLargeArc} 1 ${endX} ${endY}`
}

Clone this wiki locally