我有一个由六条弧组成的圆的SVG。我使用CSS，这样每当我悬停一个弧，它的位置在y轴上稍微移动使用翻译函数。问题是，当我悬停在一个元素上时，它将在y轴上移动，但没有考虑元素的角度。

是否有一种方法可以使线段在y轴上向上平移，同时考虑到元素与CSS和JS的角度？

以下是codepen查看代码和SVG。

---

顺晟科技：

由于您有一个固定的集合，您可以简单地设置一个类并使用它。我使用了颜色，但命名象限也可能有用。

我们需要一些几何学来决定对元素应用什么翻译。

此代码段使用30度的sin和cos和一个变量--d计算每个分段在x和y方向上的移动量，该变量表示希望切片从中心径向移动多少。

注意每个slice元素中的id=“arc”已更改为class=“arc”，因为id必须是唯一的。

rotate按钮只是将整个SVG旋转49度，这样您就可以看到悬停效果仍然有效。这是因为悬停切片位置的计算是相对于元素进行的，而不是相对于窗口进行的。

我找到了一个非常符合您需要的解决方案。

我没有移动元素，而是将其按比例放大。通过将定位点设置在元素的中心，当它悬停时就会“弹出”。

我把CSS格式变成了一个。在这种情况下，接缝更容易控制。

更新

也可以旋转。