使用SVG画一个罗盘

效果

演示地址：罗盘
项目地址：svg绘制罗盘-github

解析

工具库： svg.js
中心太极：

1. 使用 circle 画一个黑色大圆背景
2. 使用 path 画一个白色半圆移动到左/右侧
3. 使用 circle 画一个半径为大圆半径一半的黑色圆移动到上/下方
4. 使用 circle 画一个半径为大圆半径一半的白色圆移动到下/上方
5. 使用 circle 画一个半径为大圆半径3/10的黑圆移动4画的白色圆中心
6. 使用 circle 画一个半径为大圆半径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`)