如何旋转 svg 的一部分？

Question

我正在尝试创建一个 svg 图像，当您将鼠标悬停在图像的一部分上时，它会为图像的其他部分设置动画。这是一个吉他踏板，当你将鼠标悬停在它上面时，灯会亮起，表盘会旋转。但是，我无法弄清楚如何在不将刻度盘从踏板上弹开的情况下旋转刻度盘。任何帮助将不胜感激！！

这是一个例子：

https://codepen.io/SHINZOC/pen/vYEaooM

    .lo { transition: .1s;}
    .lo:hover {opacity: 0;}
    #Light_off:hover + #Dials {
    transform: rotate(45deg);
    transform-origin: center center;
     }

Answer 1

将CSS改为

.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
 }

因为您想围绕填充框而不是视图框旋转。

如何旋转 svg 的一部分？

How to rotate part of an svg?

svg

rotation