如何让CSS translate位移效果适配SVG圆形弧块的自身摆放角度？

架构老林

2026-10-1

实现方案

要实现各弧段hover时沿自身径向向外位移，可通过CSS变换组合+少量JS逻辑实现，具体操作如下：

1 修正HTML规范问题

原代码中多个<g>标签共用相同id="arc"，不符合HTML id唯一性要求，将所有对应标签的属性修改为class="arc"。

2 调整CSS基础配置

给弧段统一设置过渡效果和变换原点，变换原点设为整个圆形的中心坐标，保证旋转、位移的基准正确：

.arc {
  transition: all 0.2s;
  /* 对应SVG viewBox="0 0 439 439"的中心位置 */
  transform-origin: 219.5px 219.5px;
}

3 添加JS逻辑实现角度适配的位移

核心逻辑是利用CSS变换的叠加效果：先将弧段旋转到自身径向对齐全局Y轴，向外位移后再旋转回原角度，即可实现沿弧段自身径向的位移效果。
你的弧段是6等分圆形，每个弧段夹角为60度，直接按顺序绑定对应中心角度即可：

const arcs = document.querySelectorAll('.arc');
// 按给出的6个弧段顺序匹配的中心角度，单位为度
const arcCenterAngles = [30, 150, 210, 330, 270, 90];

arcs.forEach((arc, idx) => {
  const angle = arcCenterAngles[idx];
  // 鼠标移入时沿径向向外位移10px
  arc.addEventListener('mouseenter', () => {
    arc.style.transform = `rotate(${angle}deg) translateY(10px) rotate(${-angle}deg)`;
  });
  // 鼠标移出时复位
  arc.addEventListener('mouseleave', () => {
    arc.style.transform = 'none';
  });
});