如何旋转svg的一部分？答案

【问题标题】：How to rotate part of an svg?如何旋转svg的一部分？
【发布时间】：2020-01-16 04:32:00
【问题描述】：

我正在尝试创建一个 svg 图像，当您将鼠标悬停在图像的一部分上时，它会为图像的其他部分设置动画。这是一个吉他踏板，当您将鼠标悬停在它上面时，灯会亮起，转盘会旋转。但是，如果表盘从踏板上脱落，我不知道如何旋转表盘。任何帮助将不胜感激！

这是一个例子：

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

【问题讨论】：

标签： svg rotation

【解决方案1】：

将 CSS 更改为

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

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

【讨论】：

非常感谢！！为我节省了很多挫败感！