svg - 如何旋转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;
     }

标签： svgrotation

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;
 }

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