使用 css:hover 旋转 SVG 元素只会导致元素闪烁

问题描述

有关完整代码，请查看https://codepen.io/fcc-danielw/pen/oNBLjrj

相关部分如下所示：

<svg width="235" height="381" viewBox="0 0 235 381" fill="none" xmlns="http://www.w3.org/2000/svg">
...
<g id="images">
          <g id="img1">
            <rect id="Rectangle 10" x="37" y="158" width="71" height="71" rx="3" fill="#C4C4C4" fill-opacity="0.25" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="38" y="159" width="70" height="70">
              <rect id="Rectangle 9" x="38" y="159" width="70" height="70" rx="3" fill="#C4C4C4" />
            </mask>
            <g mask="url(#mask0)">
              <g id="mountains">
                <path id="polygon 1" d="M58.5 187L89.2439 229.75H27.7561L58.5 187Z" fill="#C4C4C4" />
                <path id="polygon 2" d="M94.5 187L125.244 229.75H63.7561L94.5 187Z" fill="#C4C4C4" />
              </g>
            </g>
          </g>
...
</g>
...
</svg>

#img1 {
      transform: rotate(0deg);
    }
    #img1:hover {
      transform: rotate(45deg);
      transform-origin: 50% 50%;
      transform-origin: 35px 35px;
    }

出于某种原因，当鼠标悬停在 #img1 上时，它没有按预期旋转，而是开始闪烁。这里有什么问题？我做错了什么？

解决方法

元素不闪烁，悬停效果只是重复了几次。 您可以通过使用 transition 来阻止此操作。

你的 #img 元素 CSS 应该是这样的

#img1 {
  transform: rotate(0deg);
  transition: 9s;
}