如何在Anki中为环形花状图添加中心到文本的连接线？

背景：我正在使用Anki，希望制作出如下所示的花状图

以下是我目前的代码（需添加到Anki背面模板中）：

{{Answer}}

<style>
/**
 Copyright 2019 Itay Grudev
 License: MIT
 */

.ciclegraph {
  position: relative;
  width: 500px;
  height: 500px;
  margin: calc(100px / 2 + 0px);
}

.ciclegraph:before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  /* Remove the border property to remove the circle outline */
  /* border: 2px solid teal; */
  width: calc(100% - 2px * 2);
  height: calc(100% - 2px * 2);
  border-radius: 50%;
}

.ciclegraph .circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px;
  height: 100px;
  margin: calc(-100px / 2);
  background: rgba(0, 128, 128, 0.0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-text {
  color: white; /* 按需调整文字颜色 */
  font-size: 14px; /* 按需调整字体大小 */
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; /* 按需调整字体大小 */
  color: white; /* 按需调整文字颜色 */
  z-index: 1; /* 确保文字显示在圆圈上方 */
}
</style>

<script>
document.querySelectorAll('.ciclegraph').forEach((ciclegraph) => {
  let circles = ciclegraph.querySelectorAll('.circle');
  let angle = 360 - 90,
    dangle = 360 / circles.length;
  for (let i = 0; i < circles.length; ++i) {
    let circle = circles[i];
    angle += dangle;
    circle.style.transform = `rotate(${angle}deg) translate(${ciclegraph.clientWidth / 2}px) rotate(-${angle}deg)`;
  }
});
</script>

我的HTML结构代码如下：

<div class="ciclegraph">
<div class="circle">
  <div class="circle-text">a</div>
</div>
<div class="circle">
  <div class="circle-text">Test 1</div>
</div>
<div class="circle">
  <div class="circle-text">Test 2</div>
</div>
  <div class="center-text"> Question</div>
</div>

我尝试过添加连接线，但始终无法实现效果。请问如何实现从中心文本到外围每个圆圈的连接线？

解决方案 #

推荐使用SVG动态绘制线条，这种方式精准度高、适配性强，不会受元素变换干扰：

1. 修改HTML结构，添加SVG容器用于承载连接线：

<div class="ciclegraph">
  <!-- 新增SVG容器 -->
  <svg class="connection-lines" width="500" height="500"></svg>
  
  <!-- 原有圆圈和中心文本 -->
  <div class="circle">
    <div class="circle-text">a</div>
  </div>
  <div class="circle">
    <div class="circle-text">Test 1</div>
  </div>
  <div class="circle">
    <div class="circle-text">Test 2</div>
  </div>
  <div class="center-text"> Question</div>
</div>

2. 添加SVG样式，确保线条显示在底层：

/* 在原有<style>中新增 */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 让线条显示在圆圈和文字下方 */
}

3. 修改JS代码，添加动态绘制线条的逻辑：

document.querySelectorAll('.ciclegraph').forEach((ciclegraph) => {
  let circles = ciclegraph.querySelectorAll('.circle');
  let angle = 360 - 90,
    dangle = 360 / circles.length;
  const radius = ciclegraph.clientWidth / 2;
  const svg = ciclegraph.querySelector('.connection-lines');
  // 花状图中心坐标（对应500x500容器的中心）
  const centerX = 250;
  const centerY = 250;

  circles.forEach((circle, i) => {
    angle += dangle;
    // 计算当前外围圆圈的中心坐标
    const radian = (angle * Math.PI) / 180;
    const circleX = centerX + radius * Math.cos(radian);
    const circleY = centerY + radius * Math.sin(radian);
    
    // 创建SVG线条元素
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', centerX);
    line.setAttribute('y1', centerY);
    line.setAttribute('x2', circleX);
    line.setAttribute('y2', circleY);
    line.setAttribute('stroke', '#008080'); // 替换为你需要的线条颜色
    line.setAttribute('stroke-width', '2'); // 替换为你需要的线条粗细
    svg.appendChild(line);

    // 保持原有圆圈定位逻辑
    circle.style.transform = `rotate(${angle}deg) translate(${radius}px) rotate(-${angle}deg)`;
  });
});

替换代码中的颜色和粗细参数后，就能实现中心到每个外围圆圈的连接线效果，且适配任意数量的外围圆圈。

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