如何用SVG、CSS或Canvas制作含各区域数值的韦恩图

我尝试用纯SVG（首选）、CSS或Canvas（最不推荐）还原韦恩图，已绘制三个重叠圆形并在圆心添加数值，但在给交集区域添加数值时遇阻，同时不知道如何在图外添加文本。

原始代码 #

<svg width="500" height="500">
<circle cx="100" cy="100" r="80" fill="red" />
<circle cx="220" cy="100" r="80" fill="green" />
<circle cx="160" cy="180" r="80" fill="blue" />
<text x="100" y="100" dy=".3em" text-anchor="middle">A</text>
<text x="220" y="100" dy=".3em" text-anchor="middle">B</text>
<text x="160" y="180" dy=".3em" text-anchor="middle">C</text>
<path d="M 180,20 A 80,80 0 0,1 260,100 L 220,100 A 40,40 0 0,0 180,60 Z" fill="purple" />
<path d="M 140,100 A 80,80 0 0,1 180,60 L 140,60 A 40,40 0 0,0 100,100 Z" fill="orange" />
<path d="M 220,100 A 80,80 0 0,1 180,60 L 220,60 A 40,40 0 0,0 260,100 Z" fill="green" />
<text x="170" y="40" dy=".3em" text-anchor="middle">A ∩ C</text>
<text x="130" y="100" dy=".3em" text-anchor="middle">A ∩ B</text>
<text x="210" y="100" dy=".3em" text-anchor="middle">B ∩ C</text>
<text x="160" y="140" dy=".3em" text-anchor="middle">A ∩ B ∩ C</text>
</svg>

优化后的SVG代码 #

<svg width="500" height="500">
  <!-- 基础圆形（半透明填充，避免覆盖交集区域） -->
  <circle cx="100" cy="100" r="80" fill="rgba(255,0,0,0.3)" stroke="red" stroke-width="2" />
  <circle cx="220" cy="100" r="80" fill="rgba(0,255,0,0.3)" stroke="green" stroke-width="2" />
  <circle cx="160" cy="180" r="80" fill="rgba(0,0,255,0.3)" stroke="blue" stroke-width="2" />

  <!-- 圆心文本 -->
  <text x="100" y="100" dy=".3em" text-anchor="middle" font-size="20" font-weight="bold">A</text>
  <text x="220" y="100" dy=".3em" text-anchor="middle" font-size="20" font-weight="bold">B</text>
  <text x="160" y="180" dy=".3em" text-anchor="middle" font-size="20" font-weight="bold">C</text>

  <!-- 两两交集区域（可选，突出显示） -->
  <path d="M 160,40 A 80,80 0 0,1 220,100 L 160,100 A 80,80 0 0,0 100,40 Z" fill="rgba(255,165,0,0.5)" />
  <path d="M 220,40 A 80,80 0 0,1 280,100 L 220,100 A 80,80 0 0,0 160,40 Z" fill="rgba(128,0,128,0.5)" />
  <path d="M 100,160 A 80,80 0 0,1 160,100 L 160,180 A 80,80 0 0,0 100,240 Z" fill="rgba(0,255,255,0.5)" />

  <!-- 三者交集区域 -->
  <path d="M 160,100 A 80,80 0 0,1 160,40 L 220,100 A 80,80 0 0,1 160,160 Z" fill="rgba(255,255,0,0.6)" />

  <!-- 交集文本标注 -->
  <text x="160" y="70" dy=".3em" text-anchor="middle" font-size="16">A∩B</text>
  <text x="220" y="70" dy=".3em" text-anchor="middle" font-size="16">B∩C</text>
  <text x="100" y="160" dy=".3em" text-anchor="middle" font-size="16">A∩C</text>
  <text x="160" y="125" dy=".3em" text-anchor="middle" font-size="16">A∩B∩C</text>

  <!-- 图外文本 -->
  <text x="250" y="450" dy=".3em" text-anchor="middle" font-size="18" font-weight="bold">韦恩图示例</text>
  <text x="400" y="100" dy=".3em" text-anchor="middle" font-size="16">集合说明：</text>
  <text x="400" y="130" dy=".3em" text-anchor="middle" font-size="14">A: 红色集合</text>
  <text x="400" y="160" dy=".3em" text-anchor="middle" font-size="14">B: 绿色集合</text>
  <text x="400" y="190" dy=".3em" text-anchor="middle" font-size="14">C: 蓝色集合</text>
</svg>

关键解决要点 #

• 交集区域修正：修正原始路径的圆弧参数，重新绘制准确的两两/三者交集闭合路径；给基础圆形设置半透明rgba填充，避免遮挡重叠区域。
• 文本定位优化：根据交集区域的中心坐标调整文本位置，确保文字落在对应区域内；通过font-size、font-weight提升可读性。
• 图外文本添加：直接在SVG画布的空白区域（如底部、右侧）添加<text>元素，利用text-anchor控制对齐方式，即可实现图外标注。

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