SVGを使って羅針盤を描きます.

効果
デモンストレーションの住所:コンパスのプロジェクトの住所:svgはコンパス-githubを描きます.
解析
工具庫:svg.jsセンター太極:

circleを使用して、黒の大円背景を描く

.

白い半円をpathで描いて左/右側

に移動します.

circeleを使用して半径が大円半径の半分の黒い円を描いて上/下の

に移動します.

circleを使用して半径が大円半径の半分の白い円を描いて下/上の方に移動します.

circeleを使って半径3/10の黒円を描いて、4画の白円中心

を移動します.

circeleを使って半径3/10の白円を描いて3画の黒い円の中心を移動します.

	  //     （  svg.js）
	  const draw = SVG('drawing').size(100, 100)
      const radius = 100
      const background = draw.circle(radius * 2).fill('#000').move(-radius, -radius)
      const white = draw.path(`M0 ${ radius } A${ radius } ${ radius } 0 0 0 0 ${ -radius }Z`).fill('#fff')
      const topWhiteCircle = draw.circle(radius).fill('#fff').move(-radius / 2, -radius)
      const bottomBlackCircle = draw.circle(radius).fill('#000').move(-radius / 2, 0)
      const topBlackCircle = draw.circle(radius / 2.5).fill('#000').move(-radius / 4, -radius / 1.5)
      const bottomWhiteCircle = draw.circle(radius / 2.5).fill('#fff').move(-radius / 4, radius / 4)

円を囲む:

pathを使って円弧を描きます.

は、外輪半径がradiusOutであり、円弧幅がarcWidthであると、内輪半径はradiusIn = radiusOut - arcWidthである.

円をn段の円弧に分けると、各円弧が円周角度angle = Math.PI * 2 / n

を占める.

は内輪始点startIn = { x: 0, y: radiusIn }を設け、外輪始点{ x: 0, y: radiusOut }は内輪終点{ x: Math.sin(angle) * radiusIn, y: Math.cos(angle) * radiusIn }であり、外輪終点は{ x: Math.sin(angle) * radiusOut, y: Math.cos(angle) * radiusOut }

である.

であれば、pathはM${ startIn.x } ${ startIn.y } L${ startOut.x } ${ startOut.y } A${ radiusOut } ${ radiusOut } 0 ${ Number(angle > Math.PI) } 0 ${ endOut.x - 0.01 } ${ endOut.y } L${ endIn.x - 0.01 } ${ endIn.y } A${ radiusIn } ${ radiusIn } 0 ${ Number(angle > Math.PI) } 1 ${ startIn.x } ${ startIn.y }

である.

は、パスとして円弧を描くことができます.

は、残りの円弧をpathで描画し、回転が必要な角度を計算し(反時計回り:-(angle * index) * 180 / Math.PIを推奨します)、回転すれば、完全円

として連結できます.

	  //     （    svg.js）
	  const draw = SVG('drawing').size(100, 100)

	  const radiusOut = 100 //     
	  const arcWidth = 40 //     
	  const radiusIn = radiusOut - arcWidth //     
	  const n = 8 //     
	  
      const angle = Math.PI * 2 / n
      const startIn = { x: 0, y: radiusIn }
      const startOut = { x: 0, y: radiusOut }
      const endIn = { x: Math.sin(angle) * radiusIn, y: Math.cos(angle) * radiusIn }
      const endOut = { x: Math.sin(angle) * radiusOut, y: Math.cos(angle) * radiusOut }
      const path = `M${ startIn.x } ${ startIn.y } L${ startOut.x } ${ startOut.y }
        A${ radiusOut } ${ radiusOut } 0 ${ Number(angle > Math.PI) } 0 ${ endOut.x - 0.01 } ${ endOut.y }
        L${ endIn.x - 0.01 } ${ endIn.y }
        A${ radiusIn } ${ radiusIn } 0 ${ Number(angle > Math.PI) } 1 ${ startIn.x } ${ startIn.y }`
     for (let index = 0; index < n; index++) {
 	    const rotateAngle = -(angle * index) * 180 / Math.PI
		draw.path(path).rotate(rotateAngle, 0, 0)
     }

コンパス円弧間には間隔がなく、弧長が等しい.座標を計算するのは簡単で、やや複雑な弧間に間隔があり、弧長が異なる例:プレゼンテーションアドレス:https://xiaoleng123.github.io/arc-by-svg/プロジェクトの住所:https://github.com/Xiaoleng123/Xiaoleng123.github.io/tree/master/arc-by-svg
詳細は直接ソースコードを見ることができます.(デモコードは普通の)作成を使って、直接デバッグツールでコードを見ることができます.