CSS transform scale作用于SVG扇形导航时元素移位问题求解

你遇到的移位问题不是元素重叠导致的，是SVG元素默认的transform-origin值为自身左上角，而非你这个饼图的圆心，直接调用scale()会围绕左上角缩放，自然会出现位置偏移。

你这个圆形导航的所有扇形都共享同一个圆心坐标(108.768, 123.223)，只需要给所有扇形统一设置变换原点为该圆心坐标，就能实现围绕圆心向外放大、不偏移的效果，不需要手动做平移矫正。

优化后完整CSS代码 #

/* 统一控制所有分组的文本隐藏显示，消除重复代码 */
[id^="group-part"] > text {
  visibility: hidden;
}
[id^="group-part"]:hover > text {
  visibility: visible;
}

/* 统一设置所有扇形的变换原点为圆心，加过渡动画更顺滑 */
[id^="part-"] {
  transition: all 0.2s ease;
  transform-origin: 108.768px 123.223px;
}

/* 各扇形hover样式 */
#part-1:hover {
  fill: red;
  transform: scale(1.2);
}
#part-2:hover {
  fill: green;
  transform: scale(1.2);
}
#part-3:hover {
  fill: purple;
  transform: scale(1.2);
}
#part-4:hover {
  fill: orange;
  transform: scale(1.2);
}
#part-5:hover {
  fill: blue;
  transform: scale(1.2);
}

/* 解决放大扇形被其他相邻元素遮挡的问题 */
svg {
  position: relative;
}
[id^="group-part"] {
  position: relative;
}
[id^="group-part"]:hover {
  z-index: 10;
}

如果你想要扇形放大的效果更贴合「向外凸起」的视觉预期，还可以在scale的基础上叠加对应方向的微小translate偏移，上述修改已经可以满足「固定位置放大」的核心需求。

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