如何在HTML5 SVG中实现带环绕圆的三色填充圆形效果？

下面是实现你需要的SVG效果的代码，完全匹配参考图的样式：

<svg viewBox="0 0 200 200" width="200" height="200">
  <!-- 中间三色扇形组成的大圆 -->
  <path d="M100,100 L180,100 A80,80 0 0 1 60,169.28 Z" fill="#ff4444" />
  <path d="M100,100 L60,169.28 A80,80 0 0 1 60,30.72 Z" fill="#4444ff" />
  <path d="M100,100 L60,30.72 A80,80 0 0 1 180,100 Z" fill="#44dd44" />
  
  <!-- 定义复用的小圆 -->
  <defs>
    <circle id="small-circle" cx="0" cy="0" r="8" fill="#ffffff" stroke="#333333" stroke-width="1" />
  </defs>
  
  <!-- 环绕的小圆，按圆周排列 -->
  <use href="#small-circle" transform="translate(188,100)" />
  <use href="#small-circle" transform="translate(160.72,160.72)" />
  <use href="#small-circle" transform="translate(100,188)" />
  <use href="#small-circle" transform="translate(39.28,160.72)" />
  <use href="#small-circle" transform="translate(12,100)" />
  <use href="#small-circle" transform="translate(39.28,39.28)" />
  <use href="#small-circle" transform="translate(100,12)" />
  <use href="#small-circle" transform="translate(160.72,39.28)" />
</svg>

代码说明： #

1. 三色大圆实现：

   • 用三个<path>元素绘制三个120°的扇形，组合成完整圆形。每个扇形通过M（起点）、L（直线到圆弧起点）、A（绘制圆弧）、Z（闭合路径）指令完成。
   • 三个扇形分别填充不同颜色，直接修改fill属性值即可更换颜色。

2. 环绕小圆实现：

   • 在<defs>中定义可复用的小圆模板，避免重复代码。
   • 通过<use>元素复用模板，利用transform="translate(x,y)"将小圆定位到大圆周围的圆周上，坐标由三角函数计算得出（以中心(100,100)为原点，半径90的圆周上的点）。

3. 自定义调整：

   • 修改大圆半径：调整<path>中A指令的两个80值，以及直线端点的坐标。
   • 修改小圆数量/大小：修改<circle>的r属性，增加/删除<use>元素并计算对应角度的坐标。
   • 修改颜色：直接替换fill属性的颜色值即可。

内容的提问来源于stack exchange，提问作者A Kumar